Vue 的 v-bind 语法 支持通过 对象语法 。
const app = new Vue({
data: () => ({ isGreen: true }),
// `div` will have class green if `isGreen` is true
template: `
<div v-bind:class={ green: isGreen }></div>
`
});
// Remove the class green from the `div`
app.$data.isGreen = false;您可以有条件地绑定多个类，并使用 : 的简写 v-bind:
const app = new Vue({
data: () => ({ green: true, small: false }),
// `div` will have class green if `green` is true
// and small if `small` is true.
template: `
<div :class={ green, small }></div>
`
});
// Remove the class green from the `div` and add class small
app.$data.green = false;
app.$data.small = true;字符串语法
您绑定到类的值 v-bind 可以是字符串，而不仅仅是对象。 例如您可以将类名存储在 data 数据中：
const app = new Vue({
data: () => ({ myClass: green }),
// `div` will have whatever class or classes are in the
// `myClass` data value.
template: `
<div :class=myClass></div>
`
});
// Remove the class green from the `div` and replace it
// with the class small
app.$data.myClass = small;另一种巧妙的方法是 使用三元运算符 来决定元素将具有哪个类：
const app = new Vue({
data: () => ({ isGreen: true }),
// `div` will have class green if `isGreen` is true.
template: `
<div :class=isGreen ? green : small></div>
`
});
// Remove the class green from the `div` and replace it
// with the class small
app.$data.isGreen = false;数组语法
你也可以绑定 class 到一个数组。 然后 Vue 将组合数组中的所有元素以形成最终的类绑定。 这使您可以在一个声明中混合和匹配字符串和对象语法：
const app = new Vue({
data: () => ({ green: true }),
// `div` will have class green if `green` is true, and
// small otherwise.
template: `
<div :class=[{ green }, green ? : small]></div>
`
});
// Remove the class green from the `div` and replace it
// with the class small
app.$data.green = false;© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
请登录后查看评论内容