vue中如何给一个标签添加多个动态属性v-bind:class

本文整理自Vue官方文档中的Class 与 Style 绑定，并非原创

1. 对象

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

//上面的语法表示 active 这个 class 存在与否将取决于data中isActive 的 truthy值。

/* truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。
所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。*/

data: {
  isActive: true,
  hasError: true
}

结果渲染为：

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

2. computed

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: true.
  isBlue: false
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error,
      blue:this.isBlue
    }
  }
}

渲染结果为：

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

3. 数组对象

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

data: {
  isActive: true,
  errorClass: 'text-danger'
}

渲染结果为：

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

另外：建议产生这个问题的小伙伴重新仔细阅读一下 Vue官方文档，会有很大收获（亲身经历）

参考链接：

1. Class 与 Style 绑定
2. Truthy（真值）(MDN网站)