Vue对于class属性的应用

最新推荐文章于 2023-11-11 20:21:52 发布

百日梦想家

最新推荐文章于 2023-11-11 20:21:52 发布

阅读量741

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_42418169/article/details/107955321

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

Vue对于class属性的应用

实例类（class）
传递方式（注意 class属性需要v-bind:绑定）

实例类（class）

<style type="text/css">
			.red{
				color:#EE3D11;
			}
			.thin{
				font-weight: 200;
			}
			.italic{
				font-style: italic;
			}
			.active{
				letter-spacing: 0.5em;
			}
		</style>

传递方式（注意 class属性需要v-bind:绑定）

方式一：以数组的形式

<!-- 第一种使用方式，直接传递-一个数组，注意这里的class 需要使用v-bind做数据绑定 -->
<h1 v-bind:class="['red','thin','italic','active']">这段文字是一段很大的文字</h1>

方式二：在数组中使用三元表达式

<!---->
<h1 v-bind:class="['red','thin','italic',flag?'ative':'']">这段文字是一段很大的文字</h1>

方式三：在数组中内嵌对象

<!--在数组中使用对象来代替三元表达式，提高代码的可读性-->
<h1 v-bind:class="['red','thin','italic',{'active':false}]">这段文字是一段很大的文字</h1>

方式四：直接使用对象，易读写（推荐，推荐，推荐）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>default</title>
		<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.red{
				color:#EE3D11;
			}
			.thin{
				font-weight: 200;
			}
			.italic{
				font-style: italic;
			}
			.active{
				letter-spacing: 0.5em;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1 v-bind:class="myclass">这段文字是一段很大的文字</h1>
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					flag:true,
					myclass:{
						red:true,
						thin:false,
						italic:true,
						active:true
					}
				},
				methods:{}
			})
		</script>
	</body>
</html>

百日梦想家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue对于class属性的应用

Vue对于class属性的应用实例类（class）传递方式（注意 class属性需要v-bind:绑定）方式一：以数组的形式方式二：在数组中使用三元表达式方式三：在数组中内嵌对象方式四：直接使用对象，易读写（推荐，推荐，推荐）实例类（class）<style type="text/css"> .red{ color:#EE3D11; } .thin{ font-weight: 200; } .italic{ font-style: ita
复制链接

扫一扫