知识点5--vue对多样式的增强

尘世壹俗人

已于 2022-07-07 11:33:34 修改

阅读量206

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2022-07-07 00:12:22 首次发布

本文链接：https://blog.csdn.net/dudadudadd/article/details/125650184

版权

VUE 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在我们日常的开发中，时常会遇到不同样式之间切换，在jquery框架中，我们可以通过固定方法修改属性值，而在vue中，所以我们提供了一种增强型的法，使我们可以为一个标签设置多个值的同时且控制不同的值是否生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" style="height: 100px;width: 100px;" v-bind:class="{one : oneStatus , two : twoStatus}">
			{{message}}
		</div>
		
		<script type="text/javascript">
			var data = {message:'Hello Vue!',b:false,oneStatus:true,twoStatus:false}
			
			var app = new Vue({
				el:'#app',
				data:data
			});
			
		</script>
		<style>
			.one{
				background-color: red;
			}
			.two{
				background-color: aqua;
			}
		</style>
	</body>
</html>

从上面的代码可以看出这种增强写法，是依赖了v-bind模板指令使得有多个class属性的预选值

下面我们看效果，当oneStatus:true,twoStatus:false时
在这里插入图片描述
当oneStatus:false,twoStatus:true时

当然这种依赖v-bind增强写法也可以用在其他地方，比如说绑定内链样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" style="height: 100px;width: 100px;" v-bind:style="{color : color_val , fontSize : size_val}">
			{{message}}
		</div>
		
		<script type="text/javascript">
			var data = {message:'Hello Vue!',color_val:"green",size_val:"20px"}
			
			var app = new Vue({
				el:'#app',
				data:data
			});
			
		</script>
	</body>
</html>

效果如下
在这里插入图片描述
总之核心点就是v-bind可以让某个标签属性有多个预选项

尘世壹俗人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
知识点5--vue对多样式的增强

在我们日常的开发中，时常会遇到不同样式之间切换，在jquery框架中，我们可以通过固定方法修改属性值，而在vue中，所以我们提供了一种增强型的法，使我们可以为一个标签设置多个值的同时且控制不同的值是否生效从上面的代码可以看出这种增强写法，是依赖了模板指令使得有多个class属性的预选值，当然这种增强写法也可以用在其他地方下面我们看效果，当时当时......
复制链接

扫一扫

专栏目录