vue.js从入门到深入再到随心而用———vue中的class样式

最新推荐文章于 2023-07-02 10:37:24 发布

学号Java

最新推荐文章于 2023-07-02 10:37:24 发布

阅读量292

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_42147171/article/details/104952280

版权

vue.js 专栏收录该内容

29 篇文章 4 订阅

订阅专栏

vue中的class样式

1.4中写法
2.代码

1.4中写法

:class="[‘xxx’,‘xxx’]"
:class="[‘xxxx’,‘xxxxx’,flag?‘xxxx’:’’]"
:class="[‘xxx’,‘xxxx’,{‘xxxx’:flag}]"
:class="{red:false,thin:true,active:true}"也可以这样写:class=“classobj”，然后把
classobj：{red:false,thin:true,active:true}写在vue中

2.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.red{
				color: red;
			}
			.thin{
				font-weight: 200;
			}
			.italic{
				font-style: italic;
			}
			.active{
				letter-spacing: 0.5em;
			}
		</style>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--第一种使用方式，注意：这里的class需要使用v-bind做数据绑定-->
			<!--<h1 :class="['red','thin']">这是一很大的h1</h1>-->
			
			<!--在数据中使用三元表达式-->
			<!--<h1 :class="['italic','thin',flag?'active':'']">这是一很大的h1</h1>-->
			
			<!--在数组中使用对象代替三元表达式,提高代码啊可读性-->
			<!--<h1 :class="['red','thin',{'active':flag}]">这是一很大的h1</h1>-->
			
			<!--在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号，所以没写引号
				属性的值是一个标识符
			-->
			<h1 :class="{red:false,thin:true,active:true}">这是一很大的h1</h1>
			<h1 :class="classobj">这是一很大的h1</h1>
		</div>
		<script type="text/javascript">
			
		new Vue({
			el:'#app',
			data:{
				flag:true,
				classobj:{red:true,thin:true,active:true}
			},
			methods:{
				
			}
		})
		</script>

	</body>
</html>

学号Java

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js从入门到深入再到随心而用———vue中的class样式

vue中的class样式1.4中写法2.代码1.4中写法:class="[‘xxx’,‘xxx’]":class="[‘xxxx’,‘xxxxx’,flag?‘xxxx’:’’]":class="[‘xxx’,‘xxxx’,{‘xxxx’:flag}]":class="{red:false,thin:true,active:true}"也可以这样写:class=“classobj”，...
复制链接

扫一扫

专栏目录