5. class 与 style 绑定

理解

• 在应用界面中, 某个(些)元素的样式是变化的
• class/style 绑定就是专门用来实现动态样式效果的技术

class 绑定

• :class='xxx'
• 表达式是字符串: 'classA'
• 表达式是对象: {classA:isA, classB: isB}
• 表达式是数组: ['classA', 'classB']

style 绑定

• :style="{ color: activeColor, fontSize: fontSize + 'px' }"
• 其中 activeColor/fontSize 是 data 属性

编码

<style>
	.classA {
		color: red;
	}
	.classB {
		background: blue;
	}
	.classC {
		font-size: 20px;
	}
</style>
<div id="demo">
	<h2>1. class 绑定: :class='xxx'</h2>
	<p class="classB" :class="a">表达式是字符串: 'classA'</p>
	<p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
	<p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>
	<h2>2. style 绑定</h2>
	<p :style="{color, fontSize}">style="{ color: activeColor, fontSize: fontSize +
	'px' }"</p>
	<button @click="update">更新</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
	el : '#demo',
	data : {
		a: 'classA',
		isA: true,
		isB: false,
		color: 'red',
		fontSize: '20px'
	},
	methods : {
		update () {
			this.a = 'classC'
			this.isA = false
			this.isB = true
			this.color = 'blue'
			this.fontSize = '30px'
		}
	}
})
</script>