v-bind 指令被用来响应地更新 HTML 属性。常用来设置 class、style等等。语法规则如下：
<span v-bind:class="classProperty"></span >
其中：v-bind 是 vue 的指令，: 后面的 class 是参数，classProperty 是我们预期要设置的值。
开发中，v-bind 写起来比较繁琐。vue 提供了缩写语法：
<span :class="classProperty"></span >
“:”后面的 class 是参数，classProperty 是我们预期要设置的值。
下面实例将展示 v-bind:class 使用对象来绑定 class 属性。实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
<style type="text/css">
.normal {font-size: 18px; font-weight:bold;}
.active {color: #26b955;}
.under-line {border-bottom: solid 3px red;}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="{ active: isActive, 'under-line': underLine }"></p>
<p v-bind:class="classObject"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActive: true,
underLine: false,
classObject: {
active: true,
'under-line': false
}
}
});
</script>
</body>
</html>其中：
(1) v-bind:class="{ active: isActive, 'under-line': underLine }" 中，如果 isActive 为 true，则为元素添加 active 样式。如果 underLine 为 true，则为元素添加 under-line 样式。
(2) v-bind:class="classObject" 中的 classObject 在 vue 对象的 data 域中定义的一个对象。
注意：上面两种方式效果一样，均给 <p> 元素添加了 class，class 为 "normal active"。
当然，我们也可以使用缩写语法来实现。DOM代码如下：
<div id="app">
<p :class="{ active: isActive, 'under-line': underLine }"></p>
<p :class="classObject"></p>
</div>下面实例将展示 v-bind:class 指令使用数组来绑定 class 属性。实例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>学习 VUE 框架</title>
<script type="text/javascript" src="../libs/vue-2.6/vue.js"></script>
<style type="text/css">
.normal {font-size: 18px; font-weight:bold;}
.active {color: #26b955;}
.under-line {border-bottom: solid 3px red;}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="[normal, active, underLine]">
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表</p>
<p v-bind:class="[normal, isActive ? active : '', underLine]">
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表</p>
<p v-bind:class="[normal, {active: isActive}, underLine]">
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
isActive: false,
normal: 'normal',
active: 'active',
underLine: 'under-line'
}
});
</script>
</body>
</html>上面实例使用 v-bind:class="[normal, isActive ? active : '', underLine]" 指定多个 class 值，其中 isActive ? active : '' 是一个三目运算符，如果 isActive 为 false，则 class 为空。
川公网安备51010802032098
