Vue的使用总结（2）

1、Vue 中 class 和 style 的绑定

在 Vue 中，可以通过数据绑定来操作元素的 class 列表和内联样式，操作 class 和 style 是用 v-bind 来绑定的。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind: class 指令可以与普通的 class 属性共存，并不会冲突或者覆盖。

当在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面，这个元素上已经存在的 class 不会被覆盖。

1.1、绑定 class

1.1.1、字符串语法

字符串语法也就是直接在 v-bind:class 后面直接写表达式。

<div v-bind:class="'red_class'">
      div3
</div>

.red_class {
    background: red;
}

1.1.2、对象语法

对象语法就是在 v-bind:class 的表达式语法里写入一个对象。该对象的属性名是类名，属性值的 true 或者 false 决定该属性名是否添加进类名中。

<div v-bind:class="{ red_class : false" >
    div1
</div>
<div v-bind:class="{ 'red_class' : classBol, 'green_class': true >  <!--属性名可以写成字符串-->
    div2
</div>
<div v-bind:class="classObj">  <!--也可以直接写对象变量-->
    div3
</div>

data: {
  classBol: true,
  classObj: {
     red_class: true
  }
}

判断该对象的属性值是 true 或者 false 的依据跟 JS 一般情况下判断数据的布尔值一样，比如：0为false，1为true，null 为false。

1.1.3、数组语法

可以把一个数组传给 v-bind:class，以应用一个 class 列表。数组语法和对象语法不同，在数组语法中，数组项是变量名，类名取决于该变量名的值，值是什么，类名就是什么。

<div v-bind:class="[redClass, greenClass]"></div>

data: {
  redClass: 'red_class',
  greenClass: 'green_class'
}

<!-- 最终渲染 -->
<div class="red_class green_class"></div>

在数组中也可以使用三元表达式，并且数组项也可以是对象

<div v-bind:class="[true? redClass : '', greenClass]"></div> <!-- 三元表达式，不过数组项仍是变量 -->

<div v-bind:class="[{ red_class: false }, greenClass]"></div> <!-- 数组项中使用对象 -->

data: {
  redClass: 'red_class',
  greenClass: 'green_class'
}

1.2、绑定 style

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue会自动侦测并添加相应的前缀。

1.2.1、对象语法

<div v-bind:style="{ color: colorVal, fontSize: sizeVal + 'px' }"></div>

<div v-bind:style="styleObject"></div>  <!--直接绑定一个对象变量-->

data: {
  colorVal: 'red',
  sizeVal: 30,
  styleObject: {
     color: 'red',
     fontSize: '13px'
  }
}

1.2.2、数组语法

绑定 style 的数组语法的数组项是对象，其实就是可以将多个样式对象绑定到元素上。

<div v-bind:style="[baseObj, otherObj]"></div>

data: {
  baseObj: {
    color: 'red'
  },
  otherObj: {
     fontSize: '13px'
  }
}