Vue.js 如何动态绑定 class 和 style-JavaScript中文网-JavaScript教程资源分享门户

在 Vue.js 中，我们可以很方便地绑定静态的 class 和 style，但是当我们需要根据数据状态来动态地改变页面的样式时，就需要使用动态绑定 class 和 style。

动态绑定 class

Vue.js 提供了多种方式来动态绑定 class，下面我们一一介绍。

对象语法

我们可以使用对象语法来动态绑定 class。对象的 key 表示 class 的名称，value 表示是否添加这个 class，当 value 为 true 时添加 class，为 false 时不添加。

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

data: {
  isActive: true,
  hasError: false
}

上面的代码中，isActive 和 hasError 是数据状态，根据这些状态添加或移除相应的 class。

数组语法

我们可以使用数组语法来动态绑定多个 class，这样我们就可以在不同的状态下动态添加不同的 class，非常方便。

<div :class="[classA, classB]"></div>

data: {
  classA: 'active',
  classB: 'text-danger'
}

上面的代码中，classA 和 classB 是数据状态，根据这些状态添加对应的 class。

使用计算属性

我们可以使用计算属性来动态绑定 class，这样我们可以根据复杂的逻辑动态地生成 class，并且可以重复使用计算属性。

<div :class="computedClasses"></div>

// javascriptcn.com 代码示例
data: {
  isActive: true,
  hasError: false
},
computed: {
  computedClasses: function () {
    return {
      active: this.isActive,
      'text-danger': this.hasError
    }
  }
}

上面的代码中，computedClasses 是一个计算属性，根据 isActive 和 hasError 的值动态地生成 class。

动态绑定 style

Vue.js 提供了多种方式来动态绑定 style，下面我们一一介绍。

对象语法

我们可以使用对象语法来动态绑定 style。对象的 key 表示 style 的名称，value 表示对应的值。

<div :style="{color: textColor, fontSize: fontSize + 'px'}"></div>

data: {
  textColor: 'red',
  fontSize: 14
}

上面的代码中，textColor 和 fontSize 是数据状态，根据这些状态动态设置样式。

数组语法

我们可以使用数组语法来动态绑定多个 style，这样我们可以在不同的状态下动态添加不同的 style，非常方便。

<div :style="[baseStyles, styleA, styleB]"></div>

// javascriptcn.com 代码示例
data: {
  baseStyles: {
    color: 'red',
    fontSize: '14px'
  },
  styleA: {
    backgroundColor: 'blue'
  },
  styleB: {
    opacity: 0.8
  }
}

上面的代码中，baseStyles、styleA 和 styleB 是数据状态，根据这些状态动态设置样式。

使用计算属性

我们可以使用计算属性来动态绑定 style，这样我们可以根据复杂的逻辑动态地生成 style，并且可以重复使用计算属性。

<div :style="computedStyles"></div>

// javascriptcn.com 代码示例
data: {
  textColor: 'red',
  fontSize: 14
},
computed: {
  computedStyles: function () {
    return {
      color: this.textColor,
      fontSize: this.fontSize + 'px'
    }
  }
}

上面的代码中，computedStyles 是一个计算属性，根据 textColor 和 fontSize 的值动态地生成样式。

总结

动态绑定 class 和 style 是 Vue.js 中非常重要的一部分，可以让我们根据数据状态来动态地改变页面的样式。在使用时，我们可以根据具体的场景选择不同的方法来实现，既可以使用对象语法、数组语法，也可以使用计算属性，根据个人喜好来选择最方便和简单的方法。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653fb0167d4982a6eb93f719