《11.vue之style样式绑定》

最新推荐文章于 2023-01-04 18:32:14 发布

@逆风微笑代码狗

最新推荐文章于 2023-01-04 18:32:14 发布

阅读量137

点赞数

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

本文链接：https://blog.csdn.net/qq_44864082/article/details/106261529

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

在vue中，style有3中样式绑定的方式！

1.通过v-bind指令绑定class样式，进行文字的渲染，但是这样增加了模板的负担,所以不推荐使用！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUe之computed指令</title>
	</head>
	  <!--1.导入vue.js包 -->
	<script type="text/javascript" src="js/vue.js" ></script>
	<body>
		<!--定义HTML元素，便于显示效果-->
		<div id="in1">
		       <h1 :style="{'color':'red','font-size':'20px'}">{{lang}}</h1>
		</div>
		<script>	
			//实例化VUE对象 传入vue参数
			var vr=new Vue({
				el:"#in1",
				data:{
					lang:"这是一个段落"
				}
				
		  });
		</script>
	</body>
</html>

2.这种方法的使用明显减轻了模板的重量，推荐使用！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUe之computed指令</title>
	</head>
	  <!--1.导入vue.js包 -->
	<script type="text/javascript" src="js/vue.js" ></script>
	<body>
		<!--定义HTML元素，便于显示效果-->
		<div id="in1">
		       <h1 :style="style1">{{lang}}</h1>
		</div>
		<script>	
			//实例化VUE对象 传入vue参数
			var vr=new Vue({
				el:"#in1",
				data:{
					lang:"这是一个段落",
					style1:{'color':'red','font-size':'50px'},
					
				}
				
		  });
		</script>
	</body>
</html>

3.多样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUe之computed指令</title>
	</head>
	  <!--1.导入vue.js包 -->
	<script type="text/javascript" src="js/vue.js" ></script>
	<body>
		<!--定义HTML元素，便于显示效果-->
		<div id="in1">
		      
		       <h1 :style="[style1,style2]">{{lang}}</h1>
		</div>
		<script>	
			//实例化VUE对象 传入vue参数
			var vr=new Vue({
				el:"#in1",
				data:{
					lang:"这是一个段落",
					style1:{'color':'red','font-size':'50px'},
					style2:{'font-weight':'300px;'}
				}
		  });
		</script>
	</body>
</html>

@逆风微笑代码狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《11.vue之style样式绑定》

在vue中，style有3中样式绑定的方式！1.通过v-bind指令绑定class样式，进行文字的渲染，但是这样增加了模板的负担,所以不推荐使用！<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>VUe之computed指令</title> </head>  <scrip
复制链接

扫一扫