动态绑定样式

Krismile S

已于 2023-05-16 09:32:25 修改

阅读量444

点赞数

分类专栏： vue2单个知识点文章标签： javascript vue.js 前端

于 2023-05-15 16:50:51 首次发布

本文链接：https://blog.csdn.net/m0_73894967/article/details/130687697

版权

vue2单个知识点专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.class(使用v-bind绑定)

a.字符串方式(类名不确定时,且需要动态获取)

添加bind要从data中获取数据,因此需要在vue中声明

b.数组(绑定多个样式,数量不确定,名称也不确定)

c.对象(要绑定多个样式,数量,名字确定,但是不确定是否使用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style type="text/css">
			 div{
				 width: 100px;
				 height: 100px;
				 margin: 10px;
			 }
		 	.box1{
				background-color: pink;
			}
			.box2{
				border:10px solid red;
			}
		 </style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="b1"></div>
			<div v-bind:class="b2"></div>
			<div v-bind:class="b3"></div>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					b1:"box1",
					b2:['box1','box2'],
					b3:{box1:false,box2:true},
				}
			})
		</script>
	</body>
</html>

2.style

当对象中的属性值与data中的属性名相同时,可以直接写属性名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <style type="text/css">
			 div{
				 width: 100px;
				 height: 100px;
				 margin: 10px;
			 }
		 </style>
	</head>
	<body>
		<div id="app">
			<div style="font-size: 30px;font-weight:bold;color:red">123</div>
			<div v-bind:style="{fontSize:size,color}">123</div>
		</div>
		<script src="./node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					size:"50px",
					color:"red"
				}
			})
		</script>
	</body>
</html>

Krismile S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态绑定样式

添加bind要从data中获取数据,因此需要在vue中声明。c.对象(要绑定多个样式,数量,名字确定,但是不确定是否使用)当对象中的属性值与data中的属性名相同时,可以直接写属性名。b.数组(绑定多个样式,数量不确定,名称也不确定)a.字符串方式(类名不确定时,且需要动态获取)1.class(使用v-bind绑定)
复制链接

扫一扫

专栏目录