1.在应用界面中，某些元素的样式是变化的
class/style绑定就是用来专门实现动态样式效果的技术
2.class绑定 ：
class=‘xxx’
xxx是字符串，数组，对象
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是数组</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>
网友评论