010 V 绑定class之数组语法

不二如是

                               
登录/注册后可看大图

上一讲我们学习了利用对象语法来绑定class，本次学习用数组语法。

当需要应用多个class时，就可以使用数组语法，给:class绑定一个数组，应用一个class列表。

创建div：

<div id="myApp">
    <div :class="[activeCle,errorCls]"></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="[isActive ? activeCls:'',errorCls]"></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）



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

T

Ruide

T

优时风

1

一笙彤

T

suweixuan1998

T