VUE动态绑定class的方法

着急使用直接看博客底部，本人常用的两种方法！！！

1.对象语法

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

data: {
  isActive: true,
}

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的值。

结果渲染为：

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

官方还给了个绑定的数据对象，绑定一个返回对象的计算属性中：

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

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

2.数组语法

我们可以把一个数组传给 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>

数组语法中使用对象语法：

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

数组中使用对象语法算是比较强大的支持了，来一起看下进阶的例子：

<div v-bind:class="[{ 'A': 'red','B': 'blue' }[classType], 
					errorClass]">
</div>

data: {
  classType: 'A',
  errorClass: 'text-danger'
}

渲染为：

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

此次主要是参考了VUE官网的内容，认为在数组语法中能使用对象语法，能方便开发时间，特地分享给大家。

来源：CSDN

作者：欧阳小红

链接：https://blog.csdn.net/weixin_43822182/article/details/103589645

标签

动态绑定

bind

vue