1.在應(yīng)用界面中，某些元素的樣式是變化的
class/style綁定就是用來專門實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)
2.class綁定 ：
class=‘xxx’
xxx是字符串，數(shù)組，對象
3.style綁定：
：style=“{color：activeColor，fontSize：fontSize+‘px’}”
其中activeColor，fontSize是data屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass{
font-size: 30px;
}
</style>
</head>
<body>
<div id="demo">
<h1>class綁定 :class='xxx'</h1>
<p class="cClass" :class="a">xxx是字符串</p>
<p :class="{aClass:true,bClass:false}">xxx是對象</p> <!--前面是類名，后面是boolean值-->
<p :class="['aClass','cClass']">xxx是數(shù)組</p>
<h1>style綁定</h1>
<p :style="{color:activeColor,fontSize:fontSize+'px'}">啊哈哈哈</p>
<button @click="update">更新</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:'#demo',
data:{
a:'aClass',
activeColor:'red',
fontSize:'20'
},
methods:{
update(){
this.a = 'bClass';
this.activeColor = 'green';
this.fontSize = 30;
}
}
})
</script>
</html>
