vue学习七动态绑定css样式

最新推荐文章于 2024-06-19 21:36:07 发布

liusongjing

最新推荐文章于 2024-06-19 21:36:07 发布

阅读量992

点赞数

分类专栏： vue前端框架 vue初学之路

本文链接：https://blog.csdn.net/meihuasheng/article/details/99293836

版权

vue前端框架同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue初学之路

18 篇文章 0 订阅

订阅专栏

实现绑定css样式的方法：

在data中设定一个值，比如changColor：false，然后就可以在容器中添加入下命令：

意思是点击这个div盒子后，里面的class就会显示出来，然后颜色就会变成你设定的，再次点击就还原

<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">
<span>liusongjing</span>
</div>

也可以用方法来返回多个样式同时实现改变等等，计算属性绑定

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 直接设定样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>   Vue 测试实例    </title>
		<!--通过cdn的方式加载入vue文件-->
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<style type="text/css">
			span{
				background: red;
				display: inline-block;
				padding: 20px;
				color: #fff;
				margin: 20px 0;
			}
			.changeColor span{
				background: blue;
			}
			.changeLength span:after{
				content: "length";
				margin-left: 20px;
				height: 100px;
			}
		</style>
		</head>
<body>
	
		<div id="app">
		 	<h1>动态CSS  Class样式</h1>
		 	
		 	<h2>实例  1</h2>
		 	<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">
		 		<span>liusongjing</span>
		 	</div>
		 	
		 	<h2>实例  2</h2>
		 	<button v-on:click="changeColor=!changeColor">改变颜色</button>
		 	<button v-on:click="changeLength=!changeLength">改变长度</button>
		 	<div v-bind:class="comClasses">
		 		<span>变长</span>
		 	</div>
		</div>

		<script>
		//实例化vue对象
				new Vue({
				  el: '#app',  //element 获取元素
				  data: {   //用于数据的存储
				    changeColor:false,
				    changeLength:false
				  },
				  methods:{  //用于各种方法的定义
				  	
				  },
				  computed:{
				  	comClasses:function(){
				  		return {
				  			changeColor:this.changeColor,
				  			changeLength:this.changeLength
				  		}
				  	}
				  }
				});
		</script>
</body>
</html>

liusongjing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习七动态绑定css样式

实现绑定css样式的方法：在data中设定一个值，比如changColor：false，然后就可以在容器中添加入下命令：意思是点击这个div盒子后，里面的class就会显示出来，然后颜色就会变成你设定的，再次点击就还原<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeCo...
复制链接

扫一扫