vue中动态绑定class名称

class的动态绑定总结

一、使用方法

1. 对象语法

使用对象语法可以根据条件动态地添加或删除 class。对象的属性名是 class 名称，属性值是布尔值，表示是否添加该 class。

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

上面的例子中，如果 isActive 为 true，则 active class 被添加，如果 hasError 为 true，则 text-danger class 被添加。

也可以使用三元表达式语法：

<div :class="isRed ? 'bg-red' : isBlue ? 'bg-blue' : 'bg-green'">div>

还可以将多个三元表达式组合在一起：

<div :class="{
  'bg-red': isRed,
  'bg-blue': isBlue,
  'bg-green': isGreen,
  'text-danger': hasError && isRed,
  'text-success': !hasError && isGreen
}">div>

绑定多个 class 时，使用三元表达式可以让我们更加灵活地根据不同的条件动态地绑定不同的 class。

2. 数组语法

使用数组语法可以将多个 class 组合在一起。

<div :class="[activeClass, errorClass]">div>

上面的例子中，activeClass 和 errorClass 都是字符串，表示两个 class 名称。

3. 字符串语法

使用字符串语法可以直接将一个字符串作为 class 名称。

<div :class="'my-class'">div>

4. 绑定一个计算属性

使用计算属性可以根据数据的变化来动态地计算 class 名称。

<div :class="classObject">div>

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

上面的例子中，classObject 是一个计算属性，根据 isActive 和 error 的值来动态计算 class 名称。如果 isActive 为 true 且 error 为 null，则返回 { active: true }，表示添加 active class；如果 error 不为 null 且 error.type 为 ‘fatal’，则返回 { ‘text-danger’: true }，表示添加 text-danger class。

5. 模板字符串

使用模板字符串可以动态地拼接 class 名称。

<div :class="`${isActive ? 'active' : ''} ${error ? 'text-danger' : ''}`">div>

上面的例子中，使用模板字符串将 active 和 text-danger 拼接在一起。如果 isActive 为 true，则拼接 active，如果 error 不为 null，则拼接 text-danger。

二、注意事项

1. 对象语法和数组语法可以结合使用

在使用 class 绑定时，你可以将对象语法和数组语法结合使用，以便更好地组合 class 名称。

<div :class="{ 'bg-red': isRed }" :class="[activeClass, errorClass]">div>

2. 绑定多个 class 时可以使用对象语法.

<div :class="{ 'bg-red': isRed, 'text-blue': isBlue }">div>

3. 可以使用三元表达式动态绑定 class

4. 动态 class 绑定的计算属性应该返回对象

如果你需要动态地计算 class 名称，那么你应该使用计算属性，并确保计算属性返回的是一个对象。

5. 绑定 class 时要注意空格

在使用 class 绑定时，不要忘记在 class 名称之间添加空格。如果你忘记添加空格，类名将无法正确地组合在一起。

<div :class="'bg-red'+'text-blue'">div>


<div :class="'bg-red' + 'text-blue'">div>