vue-随笔-class-style

v-bind:class 绑定class可以是字符串，对象，数组
字符串：

  <style>
	  	.color-red{
	  		color:#f00;
	  	}
	  </style>
	<p v-bind:class="a">Lorem ipsum dolor sit amet.</p>
  	data:{
   		a:'color-red',
   	}

对象：

<p class="ok" v-bind:class="{class1:haha,class2:wuwu}">Lorem ipsum.r</p>
   	data:{
   		haha:true,
   		wuwu:false
   	}

绑定对象的时候还可以有第二种方式：

	<p v-bind:class="obj">obj</p>

   	data:{
   		obj:{
   			'classA':true,  //这里写类名，对应的值true的会显示
   			'classB':false
   		},



   	}

数组：

<p v-bind:class="[z,x]">lorem</p>
   	data:{
   		z:'zz',
   		x:'xx'
   	}

高级的部分！！！重点啊
class对象的话可以放到computed计算属性那边去监听

<p v-bind:class="objComputed">loremabc</p>
 	data:{
   		age:5

   	},
   	computed:{
   		objComputed(){
   			return {
   				'abc':this.age>2?true:false
   			}
   		}
   	}

v-bind:style="{xxxx}"
···

Lorem ipsum dolor sit amet.

data:{ colorBlue:'blue', bigSize:'30px'

},

···

当style绑定的是对象的时候

<p v-bind:style="styleObj">0Lorem.</p>
   	data:{

   		styleObj:{
   			fontSize:'45px',//这里是直接写属性和属性值的
   			backgroundColor:'#53ff53'
   		}

   	},

同样计算属性也是可以的呀，参考上面

computed:{
    styleObj:function(){
        return {
              color:this.age>5?'#53ff53':'#f00'
}
}
}