标签：style color 绑定 classA fontSize class

理解

• 在应用界面中, 某个(些)元素的样式是变化的
• 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>

标签：style,color,绑定,classA,fontSize,class
来源： https://www.cnblogs.com/piao-bo/p/13512972.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。