# 一、绑定HTML class
有三种方法 1、直接绑定 2、数据属性绑定 3、计算属性绑定
# 1.1 对象语法
如果数据属性 发生改变，
class列表将相应地更新
<div id="app">
<div v-bind:class="{active:isActive}"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive:true
}
});
</script>
@前端进阶之旅: 代码已经复制到剪贴板
v-bind:class指令也可以与普通的class属性共存
.active{
width: 100px;
height: 100px;
background: red;
}
<div id="app">
<div class = "box" v-bind:class="{active:isActive}"></div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"对象语法",
isActive:true
}
});
</script>
@前端进阶之旅: 代码已经复制到剪贴板
可以直接绑定数据里的一个对象
.active1{
width: 100px;
height: 100px;
margin-top: 10px;
border: 1px solid #ccc ;
}
<div id="app">
<div v-bind:class="classObj"></div>
</div>
<script>
var app = 
