<h5>16.Class绑定</h5>
<div>
	<p>&lt;div :class="{ active: isActive ,'fw6' : isA}"&gt; &lt;/div&gt;</p>
	<p class="classB">
		<span class="hand" :class="{active: isA ,'fw6':isA}" @click="changeAct">{{isA?"点我变小":"点我变大"}}</span>
	</p>
</div>
<pre>注意：绑定class属性值是单括号{}——动态class名可以带引号，也可以不带，当然也可以是一个对象：包含多个class绑定样式，绑定事件不带括号，绑定文本值是双括号{{}}</pre>
<script type="text/javascript">
	//绑定class
	const classb = {
		data(){
return {
	isA:false,
	isC:false
}
		},
		methods:{
changeAct(){
	this.isA = !this.isA;
}
		}
	}
	Vue.createApp(classb).mount(".classB");
</script>

交互效果见：https://course.51qux.com/vue3-0-1

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。