在 Vue.js 中，我们经常需要根据某些条件来动态绑定 class 样式，比如根据用户是否登录来显示不同的样式。Vue.js 提供了多种方式来实现动态绑定 class 样式，本文将介绍其中的几种方式。
直接绑定
在 Vue.js 中，我们可以使用 v-bind:class 指令来直接绑定 class 样式。这个指令接受一个对象作为参数，对象的属性名是 class 名称，属性值是一个布尔值，表示该 class 是否应用。例如：
<div v-bind:class="{ 'active': isActive }"></div>上面的代码中，active 是一个 class 名称，isActive 是一个布尔值，表示是否应用该 class。如果 isActive 的值为 true，则该元素会应用 active class 样式。
绑定数组
除了绑定对象，我们还可以使用数组来动态绑定 class 样式。数组中的每个元素都是一个 class 名称，例如：
<div v-bind:class="[activeClass, errorClass]"></div>
上面的代码中，activeClass 和 errorClass 都是 class 名称，如果它们的值都为 true，则该元素会同时应用这两个 class 样式。
使用计算属性
如果我们需要根据多个条件来动态绑定 class 样式，可以使用计算属性来实现。计算属性是一个函数，返回一个对象，对象的属性名是 class 名称，属性值是一个布尔值，表示该 class 是否应用。例如：
<div v-bind:class="classObject"></div>
// javascriptcn.com 代码示例
data: {
isActive: true,
isError: false
},
computed: {
classObject: function() {
return {
active: this.isActive,
error: this.isError
}
}
}上面的代码中，classObject 是一个计算属性，它返回一个对象，对象的属性名是 active 和 error，属性值是一个布尔值，表示是否应用该 class。如果 isActive 的值为 true，则该元素会应用 active class 样式；如果 isError 的值为 true，则该元素会应用 error class 样式。
使用函数
如果我们需要根据更复杂的条件来动态绑定 class 样式，可以使用函数来实现。函数接受一个参数，表示该元素原来的 class 样式。函数返回一个对象，对象的属性名是 class 名称，属性值是一个布尔值，表示该 class 是否应用。例如：
<div v-bind:class="classObject"></div>
// javascriptcn.com 代码示例
data: {
isActive: true,
isError: false
},
methods: {
getClass: function(oldClass) {
return {
'active': this.isActive,
'error': this.isError
}
}
}上面的代码中，getClass 是一个函数，它接受一个参数 oldClass，表示该元素原来的 class 样式。函数返回一个对象，对象的属性名是 active 和 error，属性值是一个布尔值，表示是否应用该 class。如果 isActive 的值为 true，则该元素会应用 active class 样式；如果 isError 的值为 true，则该元素会应用 error class 样式。如果 oldClass 的值不为空，返回的对象会和 oldClass 合并。
总结
在 Vue.js 中，我们可以使用 v-bind:class 指令来直接绑定 class 样式，也可以使用数组和计算属性来动态绑定 class 样式。如果需要更复杂的条件，可以使用函数来实现。掌握这些技巧，可以让我们更方便地处理 class 样式，提高开发效率。
示例代码
下面是一个完整的示例代码，演示了如何使用计算属性来动态绑定 class 样式：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Class Binding</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active {
color: red;
}
.error {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="isActive"> Active<br>
<input type="checkbox" v-model="isError"> Error<br>
<div v-bind:class="classObject">
This is a test.
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
isError: false
},
computed: {
classObject: function() {
return {
active: this.isActive,
error: this.isError
}
}
}
})
</script>
</body>
</html>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d3ac2d2f5e1655d589f8e