<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.bgBlue{
background: skyblue;
}
.bgPink{
background: pink;
}
.div1{
width: 300px;
height: 300px;
margin: 0 auto;
}
#div1{
width: 300px;
height: 300px;
margin: 0 auto;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :class="color">
</div>
<button @click='changeColor'>更改颜色</button>
<hr />
<div :class="color2">
</div>
<button @click='changeColor2'>更改颜色</button>
<hr />
<div :class="color3">
</div>
<button @click='changeColor3'>更改颜色</button>
<hr />
<div :class="['div1',divBG]">
</div>
<button @click='changeColor4'>更改颜色</button>
<hr />
<!--
vue给class属性专门定制了绑定的方式，那么不会删除默认class里面的值，而是进行添加的方式，将绑定变量里面的值放入class
-->
<div data-key='123' :data-key='msg' class="123" :class="['div1',{bgPink:!isBlue},{bgBlue:isBlue}]">
</div>
<button @click='changeColor5'>更改颜色</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
color:'div1 bgBlue',
color2:{
div1:true,
bgBlue:true,
bgPink:false
},
color3:[ 'div1','bgBlue' ],
divBG:'bgBlue',
isBlue:true,
msg:'hello'
},
methods:{
changeColor:function(){
this.color = 'div1 bgPink'
},
changeColor2:function(){
this.color2 = {
div1:true,
bgBlue:false,
bgPink:true
}
},
changeColor3:function(){
this.color3 = ['div1','bgPink']
//新建了1个数组，将老的内存地址覆盖掉
//this.color3[1] = 'bgPink',因为这样并没有更改掉color3内存地址没有更改掉，所以不会触发视图的更新
//this.$set(this.color3,1,'bgPink')
},
changeColor4:function(){
this.divBG = 'bgPink'
},
changeColor5:function(){
this.isBlue = false
}
}
})
</script>
<!--
1、class属性绑定变量，变量是相对应的classname的字符串
2、使用对象的方式来绑定class,根据对象里的属性值是否是true，来决定这个属性是否添加进class
3、数组的形式
-->
</body>
</html>
