2018-03-23

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

数组语法

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

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

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

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

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

数组中嵌套对象:

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

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

data: { isActive: true, error: null }, computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal', } } }

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

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

你可能感兴趣的:(2018-03-23)