【Vue】-(5) 计算属性与class,style绑定

计算属性：

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与Style的绑定

 <!--  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>