Vue样式style

Vue样式style教程

Vue 样式 可以使用 style 来指定，且 style 里面可以是 Vue 对象数组的形式。Vue 样式使用 Vue 对象数组的语法格式为 :style="[styleObj1, styleObj2]"。

案例

Vue样式style

<!DOCTYPE html>
<html>
<head>
	<title>Vue 样式 style 数组对象</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<h1 :style="[styleObj1]">HaiCoder</h1>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script>
	var v1 = new Vue({
	    el:"#app",
	    data:{
	    	styleObj1:{color:'red', 'font-weight':200}
	    }
	})
</script>
</html>

浏览器运行效果如下图所示：

35 vue style class.png

我们看到，h1 标签被指定了 styleObj1 里面的样式。

Vue样式style总结

Vue 样式可以使用 style 来指定，且 style 里面可以是 Vue 对象数组的形式。Vue 样式使用 Vue 对象数组的语法格式为 :style="[styleObj1, styleObj2]"。