2018-03-23

今天继续昨天为弄完：class与style绑定

数组语法

一

:class除了可以绑定一个对象，也可以绑定数组

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

data {
  activeClass: 'active',
  errorClass: 'text-danger'
}

与对象语法不同的是，数组语法绑定在data中的值将直接被渲染。
上面的例子就直接渲染为：

<div class="active text-danger"></div>

在实际运用中我们会遇到class的某个属性需要动态切换，而另一个属性不需要切换，直接渲染。可以有两种方式：
三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

逗号后面的将直接被渲染，而前面的表达式，将进行判断。这种方式适用于比较class绑定的值最多为三个。

数组中嵌套对象：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

这种中方式在class的值比较多也比较适用。对象语法依然按照对象语法的使用方式，只不过外层包裹了数组，所以逗号后面的值将一直被渲染。
那么假如如果绑定多个：

<div v-bind:class="[{ active: isActive，'text-danger': hasError, title: istitle  }, errorClass]"></div>

我们是不是依然可以改写为：

<div v-bind:class="[{ classObject }, errorClass]"></div>data: {
  isActive: true,
  error: null
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal',
    }
  }
}

这个是不是可以，以后可以试一试,

今天容我浪一浪，明天好好学习~~_{祝你玩的开心。替我向你家“老大“”问好}~~