上QQ阅读APP看书，第一时间看更新
5.1 绑定class属性
我们可以为v-bind：class设置一个对象，既然是对象，内容就是在{}里面。通过改变对象中的变量（键值）从而达到动态切换class的目的。基础用法如下：
v-bind:class="{样式名称:变量}"
我们做了一个示例：
1）定义一个样式lvse_qukuai。
2）在data区域定义一个布尔型变量isActive（值为true）。
3）绑定样式v-bind：class="{lvse_qukuai：isActive}"。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js样式-class属性绑定</title>
<!--加载本地vue.js的框架-->
<script src="vue2.2.2.min.js"></script>
<style>
/*自定义一个绿色区块的样式：宽、高为100px，绿色背景*/
.lvse_qukuai {
width: 100px; /*宽度*/
height: 100px; /*高度*/
background-color: green;/*绿色背景*/
}
</style>
</head>
<body>
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
<!--属性isActive的值（可以理解为变量）如果为true，则显示绿色的区块；否则隐藏-->
<!--lvse_qukuai是样式的名称-->
<div v-bind:class="{lvse_qukuai: isActive}"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
</body>
</html>
效果如图5-1所示。
图5-1 绑定class属性
我们将isActive设置为true，显示了样式lvse_qukuai对应的内容（一个绿色的div块），如果设置为false，则不显示。
提示 这里的样式名称可以直接写lvse_qukuai，也可以加上单引号，如'lvse_qukuai'。变量isActive不能添加单引号，如果添加了会被解析为true。