010 V 绑定class之数组语法

不二如是

                               
登录/注册后可看大图

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

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

创建div：

1. <div id="myApp">
   
2.     <div :class="[activeCle,errorCls]"></div>
   
3. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el:"#myApp",
   
4.         data:{
   
5.             activeCls:"active",
   
6.             errorCls:"error"
   
7.         }
   
8.     })
   
9. </script>

复制代码

通过数组语法来绑定多个class，当activeCls和errorCls任意为真，对应的类绑定就会成功。

还可以使用三元表达式来根据条件切换class。

稍微科普一下三元表达式：

1. 表达式 (expr1) ? (expr2) : (expr3)

复制代码

在 expr1 求值为 true 时，执行 expr2，反之，执行 expr3。

创建div：

1. <div id="myApp">
   
2.     <div :class="[isActive ? activeCls:'',errorCls]"></div>
   
3. </div>

复制代码

Vue实例：

1.     var app = new Vue({
   
2.         el:"#myApp",
   
3.         data:{
   
4.             isActive:true,
   
5.             activeCls:"active",
   
6.             errorCls:"error"
   
7.         }
   
8.     })

复制代码

第一项利用三元表达式，第二项error同上，只要data中errorCls为真就绑定。

当数据isActive为真，执行绑定activeCls，反之绑定为空，即不绑定。

---

课后作业


1、数组语法绑定class时可以使用三元表达式吗？（T/F）



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

lbjstudypython

T

Ruide

T

优时风

1

一笙彤

T

suweixuan1998

T