vue教程 class，style的绑定

元素标签中class，style属性的绑定与普通的属性绑定一样，都是使用v-bind指令（简写成 ‘:’）。但是vue对class，style属性，做了增强处理。

一、css绑定

可以接受字符串, 属性, 计算属性, 对象，数组。
无论动态绑定的是何种类型的数据，最终都是要获取字符串的值赋值给class属性。如果是变量，或者数组，都是将变量的值作为class的一项值。如果是对象，就是取对象的key，作为class的一项值。

css绑定的基本使用

1、v-bind:class接受字符串

#绑定属性等号的右边，相当于一个js环境，如果有引号包裹的标识符，那么就是字符串常量； 如果是true，false就是boolean型常量； 没有引号包裹的标识符就被当做是变量。
<div :class="'select'"></div>

2、v-bind:class接受属性
属性的值类型可以是string，对象，或者数组。

<div :class="select"></div>

3、v-bind:class接受计算属性

属性的值类型可以是string，对象，或者数组。

<div :class="select"></div>

4、v-bind:class接受对象
动态绑定的class，当接受的是对象时，取对象的属性名作为class的一部分。

元素标签上的class属性，本质上是一个 ‘select1， select2，select3’的字符串。而vue最终会将 :class 接受的对象，转换成字符串。 如果对象中的属性的值，不为空或者false，那么就会将key转化为class的一项值。比如如果isSelect为真，那么class就会增加一个’select’值。

<div :class='{ select : isSelect,  select1 : true }'