Vue学习——v-bind绑定class用法 Vue

1.通过v-bind可以为一个标签绑定多个类：

.big{ font-size: 30px; } .italic{ font-style: italic } .red{ color:red; }

测试字符串

文章图片

2.还可以在class数组中使用三元表达式：

测试字符串

var bind_test2 = new Vue({ el: "#bind_test2", data: { flag: false }, methods: { } })

flag的值为false，因此不引入italic类

文章图片

3.还可以用对象代替三元表达式

测试字符串

4.也可以直接在class中传一个对象。注意：对象中的key可以加引号，也可以不加引号

测试字符串1 测试字符串2

文章图片

5.上面这种写法也可以改写成如下形式：

测试字符串

var bind_test2 = new Vue({ el: "#bind_test2", data: { flag: false, classObj: {red : true, italic : true, big: true} }, methods: { } })

【Vue学习——v-bind绑定class用法】

文章图片

Vue学习——v-bind绑定class用法