vue.js 바인딩 스타일 스타일 및 클래스 목록

데이터 바인딩의 일반적인 요구 사항은 요소의 클래스 목록과 해당 인라인 스타일을 조작하는 것입니다. 둘 다 속성이므로 v-bind를 사용하여 처리할 수 있습니다. 표현식의 최종 문자열만 평가하면 됩니다. 그러나 문자열 연결은 번거롭고 오류가 발생하기 쉽습니다. 따라서 Vue.js는 클래스 및 스타일과 함께 사용될 때 v-bind를 특별히 향상시킵니다. 문자열 외에도 표현식의 결과 유형은 객체 또는 배열일 수도 있습니다.

1. Class 속성을 바인딩합니다.

v-bind: 명령을 사용하여 데이터를 바인딩합니다.

구문:

. 클래스 뒤의 큰따옴표는 객체 리터럴/객체 참조/배열을 매개 변수로 허용합니다.

여기서 {active: isActive}는 객체 매개 변수이고 active는 클래스 이름, isActive는 부울 값입니다. 예는 다음과 같습니다.

객체 리터럴 바인딩

html:

<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
状态:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:&#39;#classBind&#39;,
data:{
isWarning:true,
alertList:[&#39;红色警报&#39;,&#39;警报解除&#39;],
alert:&#39;&#39;
},
computed:{
isSafe:function(){
return !this.isWarning;
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

css:

.warning{
color:#f24;
}
.safe{
color:#42b983;
}

상태 텍스트를 클릭하면 다음 텍스트와 색상을 전환할 수 있습니다.

//상태: 알림이 true로 해제됨

//상태: 빨간색 경고 false

바운드 개체 참조

여기에 바인딩된 개체는 Vue 인스턴스의 데이터에 기록될 수 있으며 class="classObj ", double 인용문의 클래스는 Vue 인스턴스의 classObj 객체에 대한 참조입니다. classObj는 데이터에 배치되거나 계산될 수 있습니다. classObj에 해당하는 함수는 다음과 같이 객체를 반환해야 합니다.

js:

var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['红色警报','警报解除'],
alert:''
},
computed: {
isSafe: function () {
return !this.isWarning;
},
classObj:function(){
return {
warning: this.isWarning,
safe:this.isSafe
}
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
}
});

바운드 배열

html:

<div v-bind:class="classArray" @click="removeClass()">去掉class</div>

js

data: {
classArray:["big",'red']
}
methods:{
removeClass:function(){
　　this.classArray.pop();
}
}

css:

.big{
font-size:2rem;
}
.red{
color:red;
}

효과, 클래스를 제거하려면 클릭하세요. 마지막 요소를 제거하려면 RemoveClass 함수가 호출됩니다. classArray 배열의 첫 번째 항목에 대해 'red'를 제거하면 글꼴 색상이 빨간색에서 검은색으로 변경됩니다. 다시 클릭하고 'big'을 제거하면 글꼴이 작아집니다.

2. 인라인 스타일 바인딩

지금 이 페이지 옆에 있는 Vue api 문서를 보고 여기서 판매하고 있는데 ㅇ( ^▽^ )o

html

<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+&#39;px&#39;}" @click="bigger">styleBind</span>
</div>

css

CSS가 필요하지 않습니다. . .

js

var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
}
});

객체 리터럴을 전달하는 것 외에도 객체 참조 및 배열을 V-bind에 전달할 수도 있습니다. 스타일