vue的on-bind可以以`[]`方式传入数组？

Question

vue使用下面的可以传递一个数组给class:

<h1 :class="['thin', 'redcolor']">{{msg}}</h1>

但是怎么理解？如果没有vue，这里是不能加[]的，

<h1 class="['thin', 'redcolor']">{{msg}}</h1> 

<h1 :class="[thin, redcolor]">{{msg}}</h1>

这样都是不行的。

那么是否是vue的on-bind: 就可以加[]？

Answer 1

首先，vue绑定css有几种方式：

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

你的第一种可以实现的方式等价于：

    <h1 :class ="['thin','redcolor']">test</h1>
    <h1 :class ="style">test</h1>

    data() {
      return {
        style:['thin','redcolor'],
        }
     } 

第二种<h1 class="['thin', 'redcolor']">{{msg}}</h1> 不能实现的原因是，原生css不支持这种的写法 ，必须是：

<h1 class="['thin', 'redcolor']">{{msg}}</h1>
正确：<h1 class="thin redcolor">{{msg}}</h1> 

第三种不能实现的原因是：在vue中没有加引号代表的是变量而不是字符串

<h1 :class="[thin, redcolor]">{{msg}}</h1>
正确：
<h1 :class="[thin, redcolor]">{{msg}}</h1>
    data() {
      return {
        thin:'thin',
        redcolor:'redcolor',
        }
    }

以上所有方法最终都会被解析为

<h1 class="thin redcolor">test...</h1>