var vm=new Vue({
el:'#app',
data:{
a:2,
},
computed:{
//這里的b是計算屬性:默認getter
b:{
get:function(){
return this.a+1
},
set:function(newValue){
this.a=newValue-3
}
}
}
});
console.log(vm.b);//3
vm.a=3;
console.log(vm.b);//4
vm.b=8; //設置vm.b=8會調用set方法,vm.a變為5
console.log(vm.a);//5
<!-- Class綁定 -->
1.v-bind:class和普通屬性class可以並存(對象語法)
<div class="static" v-bind:class="{'classA':isA,'classB':isB}"></div><br />
渲染為:<div class='static classA classB'></div>
2.可以直接綁定數據里面的一個對象
<div v-bind:class="classObject"></div>
渲染為:<div class="class-c"></div><br />
3.傳遞數組給:class(數組語法)
<div :class="[classA,classB]"></div>
渲染為:<div class="class-a class-b"></div>
<br /><br />
<!-- Style綁定 -->
1.對象語法
<div :style="{color:activeColor,fontSize:fontSize+'px'}">Test</div>
<div :style="styleObject">Test</div>
2.數組語法
<div :style="[styleObjectA,styleObjectB]"></div>