Vue样式三元表达式

Vue样式三元表达式教程

Vue 样式 可以使用 class 来指定，且 class 里面可以支持三元表达式的形式。Vue 样式使用三元表达式的语法格式为 :class="['style1', 'style2', flag?'style3':'style4']"。

案例

Vue样式三元表达式

<!DOCTYPE html>
<html>
<head>
	<title>Vue 样式支持三元表达式</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<style>
		.red{
			color: red;
		}
		.italic{
			font-style: italic;
		}
		.active{
			letter-spacing: 0.5em;
		}
	</style>
</head>
<body>
	<div id="app">
		<h1 :class="['red', 'italic', flag?'active':'']">HaiCoder</h1>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script>
	var v1 = new Vue({
	    el:"#app",
	    data:{
	    	flag:false
	    }
	})
</script>
</html>

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

29 vue style class.png

我们看到，h1 标签只被指定了 red 和 italic 两个样式，而样式 active 并未被指定。因为 Vue 实例对象的 flag 为 false。我们，现在将 flag 的值设为 true，代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>Vue 样式支持三元表达式</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
	<style>
		.red{
			color: red;
		}
		.italic{
			font-style: italic;
		}
		.active{
			letter-spacing: 0.5em;
		}
	</style>
</head>
<body>
	<div id="app">
		<h1 :class="['red', 'italic', flag?'active':'']">HaiCoder</h1>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script>
	var v1 = new Vue({
	    el:"#app",
	    data:{
	    	flag:true
	    }
	})
</script>
</html>

此时，再次运行，浏览器运行结果如下：

30 vue style class.png

我们看到，h1 标签样式 active 被指定了。因为 Vue 实例对象的 flag 为 true。

Vue样式三元表达式总结

Vue 样式可以使用 class 来指定，且 class 里面可以支持三元表达式的形式。Vue 样式使用三元表达式的语法格式为 :class="['style1', 'style2', flag?'style3':'style4']"。