010 V 绑定class之数组语法
本帖最后由 不二如是 于 2018-9-7 10:19 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们学习了利用对象语法来绑定class，本次学习用数组语法。
当需要应用多个class时，就可以使用数组语法，给:class绑定一个数组，应用一个class列表。
创建div：
<div id="myApp">
<div :class=""></div>
</div>
创建Vue实例：
<script>
var app = new Vue({
el:"#myApp",
data:{
activeCls:"active",
errorCls:"error"
}
})
</script>
通过数组语法来绑定多个class，当activeCls和errorCls任意为真，对应的类绑定就会成功。
还可以使用三元表达式来根据条件切换class。
稍微科普一下三元表达式：
表达式 (expr1) ? (expr2) : (expr3)
在 expr1 求值为 true 时，执行 expr2，反之，执行 expr3。
创建div：
<div id="myApp">
<div :class=""></div>
</div>
Vue实例：
var app = new Vue({
el:"#myApp",
data:{
isActive:true,
activeCls:"active",
errorCls:"error"
}
})
第一项利用三元表达式，第二项error同上，只要data中errorCls为真就绑定。
当数据isActive为真，执行绑定activeCls，反之绑定为空，即不绑定。
课后作业
1、数组语法绑定class时可以使用三元表达式吗？（T/F）
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif T T 1 T T
页:
[1]