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>

?

轉載于:https://www.cnblogs.com/wuheng1991/p/7580229.html

總結

以上是生活随笔為你收集整理的Vue中计算属性与class,style绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。