绑定样式的说明》

绑定class样式

字符串写法

适用于：样式类名不确定，需要动态指定

<div class="basic" :class="mood"></div>
<script>
 	...
 	const vm = new Vue({
		el:'',
		data:{
			mood:'normal',  //执行某个操作可以对mood进行修改
		} ,
		
})	
 	
</script>

数组写法

适用于：要绑定的样式个数，以及名字不确定

<div class="basic" :class="classArr"></div>
<script>
 	...
 	const vm = new Vue({
		el:'',
		data:{
			classArr:['样式1','样式2','样式3']
		} ,
		
})	
 	
</script>

对象写法

<div class="basic" :class="classObj"></div>
<script>
 	...
 	const vm = new Vue({
		el:'',
		data:{
			Obj:{
				样式1:false,
				样式2:true
			}
		} ,
		
})	
 	
</script>

绑定style样式

对象写法

<div v-bind:style="styleObject"></div> 
//或者
<div :style="styleObject"></div>
=================================
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

数组写法

<div :style="styleArr"></div>
================================
data:{
	styleArr:[styleObject,styleObject1,styleObject2]

}

多重值

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="styleArr"></div>
================================
data:{
	styleArr:['-webkit-box', '-ms-flexbox', 'flex']
}

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 styleArr: flex

总结

class样式
写法 :class="xxx" xxx可以是字符串，对象，数组

字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于:要绑定多个事件，个数确定，名字也确定，但不确定用不用

style样式

:style="{fontSize:xxx}"   //xxx是动态变化的

:style="[a,b]"			 //其中a,b是样式对象