vue html绑定数组,VueJs Class 与 Style 绑定 数组语法

应用介绍

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

渲染为：

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

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

演示案例：

Class 与 Style 绑定->绑定HTML CLASS 对象语法

var app = new Vue({

el: '#app',

data: {

activeClass: 'active',

errorClass: 'text-danger',

isActive: true,

}

});

.static{

color: #333;

padding: 0.5rem;

margin: 0.1rem;

}

.text-danger{

color: #ff3b1d;

}

.active{

background:#f5f5f5;

}