【Vue】-(5) 计算属性与class,style绑定
计算属性:var vm=new Vue({el:'#app',data:{a:2,},computed:{//这里的b是计算属性:默认getterb:{get:function(){return this.a+1},set:function(newValue){this.a=newValue-3}
·
计算属性:
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>
更多推荐
已为社区贡献2条内容
所有评论(0)