vue通过数据绑定为元素设定class样式

最新推荐文章于 2024-07-25 09:04:14 发布

junkaigege

最新推荐文章于 2024-07-25 09:04:14 发布

阅读量374

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/junkaigege/article/details/103227321

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这块儿的关于三元表达式后面再根据需要，再进行补习。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
	<style>
		.red{color:red;}
		.thin{font-weight:200;}
		.italic{font-style: italic;}
		.active{letter-spacing: 0.5em;}
	</style>
</head>
<body>

	<div id="app">
		<h1 :class="['red','thin']">这是邪恶的H1</h1>
		<h1 :class="['red','thin',iscative?'active':'']">这是邪恶的H1</h1>
		<h1 :class="['red','thin',{'active':iscative}]">这是邪恶的H1</h1>
		<h1 :class="{red:ture,iscative:true,thin:ture}">这是邪恶的H1</h1>
	</div>
	<script>
		
		var vm =new Vue({
			el:'#app',
			data:{

			},
			methods:{

			}
		})
	</script>
</body>
</html>

在这里插入图片描述