Vue样式Class

Vue样式Class教程

Vue 样式可以使用 class 来指定。Vue 样式的语法格式为 :class="['style1', 'style2']"。

案例

Vue样式Class

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

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

28 vue style class.png

我们看到，第一个 h1 标签使用的方式，就是使用的 css 的语法格式。第二个 h1 标签使用的方式，是使用了 Vue 的 数据绑定 的形式，但这里的样式必须使用数组的形式，且数组里面的每一个样式都必须使用单引号。

Vue样式Class总结

Vue 样式可以使用 class 来指定。语法格式为 :class="['style1', 'style2']"。Vue 样式使用数据绑定形式时，样式必须使用数组的形式，且数组里面的每一个样式都必须使用单引号。