vue学习 七 动态绑定css样式

vue前端框架 同时被 2 个专栏收录
19 篇文章 0 订阅
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>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值