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>