前面章节介绍了 Vue.js 怎样绑定属性，我们在开发时，为了给元素添加样式，通常需要添加 class 属性，甚至是根据数据动态添加 class 属性。
下面将介绍怎样通过 Vue.js 给元素绑定 class 属性。因为 class 也是属性，所以我们页可以用 v-bind 处理它们。只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的值。如果 isActive=true，则。如果 isActive=false，则 class=""。
你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>对应的 data：
data: {
isActive: true,
hasError: false
}结果渲染为：
<div class="static active"></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。
绑定的数据对象不必内联定义在模板里，可以将该对象直接放在 data 中，如下：
<div v-bind:class="classObject"></div>
对应的 data：
data: {
classObject: {
active: true,
'text-danger': false
}
}渲染的结果和上面一样。
我们也可以在这里绑定一个返回对象的计算属性（什么是计算属性后续介绍），如下：
<div v-bind:class="classObject"></div>
对应的 data：
data: {
isActive: true,
error: null
},
// 计算属性
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}示例代码：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<!-- 使用 CDN 引入 Vue 库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
.active { color: red; }
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject">
Vue.js 绑定 class 属性</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
isActive: true,
error: null
},
// 计算属性
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
});
</script>
</body>
</html>除了传递对象给 v-bind:class，我们还可以把一个数组传给 v-bind:class，以应用一个 class 列表，例如：
<div v-bind:class="[activeClass, errorClass]"></div>
对应的 data：
data: {
activeClass: 'active',
errorClass: 'text-danger'
}渲染为：
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass，但是只有在 isActive 是 true 时才添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>示例代码：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<!-- 使用 CDN 引入 Vue 库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
.active { font-weight: bold; }
.text-danger { color: red; }
</style>
</head>
<body>
<div id="app">
<div v-bind:class="[{ active: isActive }, errorClass]">Vue.js 绑定 class 属性</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
isActive: true,
errorClass: 'text-danger'
}
});
</script>
</body>
</html>当在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如，如果你声明了这个组件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})然后在使用它的时候添加一些 class：
<my-component class="baz boo"></my-component>
HTML 将被渲染为：
<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class 也同样适用：
<my-component v-bind:class="{ active: isActive }"></my-component>当 isActive 为 true 时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>
示例代码：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<!-- 使用 CDN 引入 Vue 库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
.active { color: red; }
</style>
</head>
<body>
<div id="app">
<my-component class="baz boo" v-bind:class="{active: isActive}"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
template: '<p class="foo bar">Hi! Vue.js</p>'
});
var app = new Vue({
el: "#app",
data: {
isActive: true
}
});
</script>
</body>
</html>
川公网安备51010802032098
