VUE之通过属性(v-bind :)绑定使用class样式

最新推荐文章于 2023-12-11 15:37:15 发布

古雅学长

最新推荐文章于 2023-12-11 15:37:15 发布

阅读量837

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_46179813/article/details/106364556

版权

VUE 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

1、通过属性(v-bind :)绑定、数组的方法添加样式

<h1 :class="['thin','italic',{'active':flag}]">若果flag为true就用这个类，是false就不用</h1>
data:{
				flag:true
			},

2、通过属性(v-bind :)绑定、对象的方式添加样式

<h1 :class="{red:true,thin:false,italic:true,active:false}">一世浮沉一刹那，一程山水一年华</h1>//第一种
			<h1 :class="obj"></h1>//第2种
			data:{
				obj:{red:true,thin:false,italic:true,active:false},//可以加引号
			},

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style>
			.red {
				color:red;
			}
			.thin {
				font-weight:200;
			}
			.italic {
				font-style:italic;
			}
			.active {
				letter-spacing: 1em;;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1 :class="obj">一世浮沉一刹那，一程山水一年华</h1>
			<h1 :class="['thin','italic',{'active':flag}]">若果flag为true就用这个类，是false就不用</h1>
		</div>
		
	</body>
	<script type="text/javascript">
		
		var vm = new Vue({
			el:"#app",
			data:{
				obj:{red:true,thin:false,italic:true,active:false},//可以加引号
				flag:true
			},
			methods:{

			}
		});
	</script>
</html>

古雅学长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE之通过属性(v-bind :)绑定使用class样式

1、通过属性(v-bind :)绑定、数组的方法添加样式<h1 :class="['thin','italic',{'active':flag}]">若果flag为true就用这个类，是false就不用</h1>data:{ flag:true },2、通过属性(v-bind :)绑定、对象的方式添加样式<h1 :class="{red:true,thin:false,italic:true,active:false}">一世浮沉一刹那，一程山
复制链接

扫一扫