VUE的style和class绑定

我们在操作元素的class列表和内敛样式是数据绑定的常见需求，他们都是attribute，我们可以用v-bind去完成。但是麻烦容易出错，所以在将v-bind用于class和style时，vue.js做了特殊处理，表达式的结果的类型除了字符串还可以是对象和数组。

一.class绑定

1.字符串绑定：

<div :class='min'></div>
//表示min属性赋值给了div的class属性

2.对象绑定

<div :class='{class1:isActive}'></div>
//表示class1这个类存在与否取决于isActive是true还是false
//isActive属性可以是true/false，当然也可以是一个返回true/false的表达式；
<div :class='{class1:1===1}'></div>

你可以在对象中传入更多字段来动态切换多个 class。此外，:class 指令也可以与普通的 class attribute 共存。

<div class='a' :class='{class1:isActive,class2:isActive}'></div>

绑定的数据对象不必内联定义在模板里，可以直接使用data中的属性对象。
结合计算属性
也可以绑定一个返回对象的计算属性。这是一个常用且强大的模式,可以处理复杂逻辑下的样式显示；

3.数组绑定

如果想应用一个样式列表，可以通过绑定一个数组的方式实现；

 <div :class="[activeclass,errorClass]"></div>

data(){ return {
   	 activeClass:'active',
   	 errorClass:'text-danger'
    }
}
//最终的渲染结果为：
<div class="active text-danger"></div>

如果你想根据条件切换列表中的 class，可以使用三元表达式：

 <div :class="[isActive ?activeClass:,errorClass]"></div>

这种写法不如对象的写法方便；所以，使用数组方式，更多考虑的是绑定一组class到标签

 <div :class="[[active:isActive },errorClass]"></div>

二.style绑定

1.对象语法

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个JavaScript 对象

 <div :style="{color:activeColor,fontsize:fontsize +'px"}"></div>

所以，在记忆时，就可以认为style绑定是在写css样式，只是属性值为data的 属性；

直接绑定到一个样式对象通常更好，这会让模板更清晰

 <div :style="styleObject">×/div>

 data(){
	 return {
		 styleObject:{
			 color:'red',
			 fontSize:‘13px
		 }
	 }
 }

但是如此绑定在想去动态改变属性就变得不是很方便。通过绑定计算属性，可以保持美观度的同时，又可以动态改变；

2.数组语法

:style 的数组语法可以将多个样式对象应用到同一个元素上

 <div :style="[fontStyle,backgroundStyle]"></div>

 data(){
	 return {
		fontStyle:{
		 	fontstyle:'14px',
		 	color:'red'
		},
		 backgroundstyle:{
		 	backgroundColor:'blue'
		}
	 },
 }