<!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">
<h2>1. class樣式的綁定，使用套路: :class='xxx' </h2>
<p :class="a">xxx是字符串</p>
<!--:class屬性值是對象時，key是class類名，value是true的，樣式會生效-->
<p :class="{aClass:isA, bClass:isB}">xxx是對象</p>
<!--:class的值是數組，元素是class類名-->
<p :class="['aClass','cClass']">xxx是數組</p>
<h2>1. style樣式的綁定，使用套路: :style='' </h2>
<p :style="{color:activeColor,fontSize:fontSize+'px'}">style樣式的綁定:xxx是對象</p>
<button @click="update">更新</button>
</div>
<script type="text/javascript" src="lib/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#demo",
data: {
a: 'aClass',
b: 'bClass',
isA: true,
isB: false,
activeColor:'green',
fontSize:50
},
methods: {
update(){
this.a = this.b;
this.isA = false;
this.isB = true;
this.activeColor = 'blue';
this.fontSize = 20;
}
}
});
</script>
</body>
</html>
OK!