vue学习七动态绑定css样式

meihuasheng

发布于 2021-03-16 21:38:46

2.1K0

发布于 2021-03-16 21:38:46

文章被收录于专栏：phpcoders

实现绑定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>