初识Vue 3.0 —— 动态Style内联样式绑定

<h5>17.Style内联样式绑定</h5>
<div>
	<p>&lt;div :style="{ color: activeColor, fontSize: fontSize + 'px' }"&gt; &lt;/div&gt;</p>
	<p class="styleB">
		<span class="hand" :style="{color: activeColor, fontSize: fontSize + 'px'}" >我是24号红色字体</span>
		<span :style="stylearr">我是18号蓝色字体</span>
	</p>
	<pre>注意：内联样式属性名可以用驼峰式，或短横线分割,也可以是一个对象/数组</pre>
</div>
<script type="text/javascript">
	//绑定style内联样式
	const styleb = {
		data(){
return { 
	activeColor:"red",
	fontSize:24,
	stylearr:{
		color:"blue",
		fontSize:"18px"
	}
}
		} 
	}
	Vue.createApp(styleb).mount(".styleB");
</script>

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

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

转载请注明来源： 初识Vue 3.0 —— 动态Style内联样式绑定 - Qui-Note