vue 的 Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
1、class绑定
(1)对象语法
我们可以传给 v-bind:class 一个对象,以动态地切换 class:
绑定的数据对象不必内联定义在模板里:
data: { classObject: { active: true, 'text-danger': false } }我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:
data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } } (2)数组语法 我们可以把一个数组传给 v-bind:class,以应用一个 class 列表: data: { activeClass: 'active', errorClass: 'text-danger' } 渲染为:如果你也想根据条件切换列表中的 class,可以用三元表达式:
这样写将始终添加 errorClass,但是只有在 isActive 是 truthy[1] 时才添加 activeClass。 不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:(3)用在组件上
当在一个自定义组件上使用 class 属性时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如,如果你声明了这个组件:
Vue.component('my-component', {
template: '
})
然后在使用它的时候添加一些 class:
HTML 将被渲染为:
当 isActive 为 truthy[1] 时,HTML 将被渲染成为:
(4)style绑定类似
----------------------------------------------要成为高手------------------------------------------------