Vue Class与Style绑定-绑定HTML Class - xiaoxustudy

Vue官网：https://cn.vuejs.org/v2/guide/class-and-style.html#绑定-HTML-Class

学习官网教程。纪录练习。

可以传给 v-bind:class 一个对象，动态地切换 class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div
				v-bind:class="{active: isActive}"
				style="width:200px; height:200px; text-align:center; line-height:200px;"
			>
				hi vue
			</div>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					isActive:true
				}
			})
		</script>
		<style>
			.active{background:red}
		</style>
	</body>
</html>

把第21行的 isActive 属性的值改为 false，div 上就没有绑定 active 这个class。页面表现为：

可以在对象中传入更多字段，切换多个 class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div
				class="text"
				v-bind:class="{active: isActive, white: isWhite}"
				style="width:200px; height:200px; text-align:center; line-height:200px;"
			>
				hi vue
			</div>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					isActive:true,
					isWhite: true
				}
			})
		</script>
		<style>
			.text{font-size: 40px;}
			.white{color: white; }
			.active{background: red;}
		</style>
	</body>
</html>

查看控制台，可以看到 class 与 style 绑定后的 class 属性。

v-bind 语法支持数组形式

静态地添加样式

可以通过三元运算对样式进行动态赋值

如果 isActive 变量为 true 就绑定 active 样式，如果 isWhite 变量为 true 就绑定 white 样式

posted on 2020-06-10 14:33 xiaoxustudy 阅读(349) 评论(0) 收藏举报

刷新页面返回顶部