数组语法

本节目标：理解“数组语法”的核心思路，并能把它用于实际开发或面试表达。 一、可以把一个数组传给 v-bind:class，以应用一个class列表： 注意：数组的元素代表的是属性名，而不是样式名。

<div v-bind:class="[activeClass, errorClass]"></div>
data: {  activeClass: 'active',  errorClass: 'text-danger'}

渲染为：

<div class="active text-danger"></div>

二、数组的元素可以使用表达式得出： 如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy 时才添加 activeClass。

三、不过，当有多个条件class时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>