vue中的Class与v-bind绑定

v-bind用于class和style的不同情况

一.对象语法

active 这个 class 是否有效取决与 isActive 的值 , 且不影响普通class d1 的设置 , 并且这个div 的 class的取值一直动态的受isActive的影响

<div v-bind:class="{ active: isActive }" class="d1"></div>

如果isActive 为 true上面的表达式相当于

<div class="d1 active"></div>

二.数组语法

直接给v-bind:class绑定一个数组,来生成一个class列表

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染成

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

也可以使用三元表达式

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

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

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

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

三.用在组件上

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。