<!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!