Vue-动态绑定CSS样式

vue学习笔记 专栏收录该内容
17 篇文章 0 订阅

在这一片博客里面主要讲解了如何通过@:click也就是(v-on:click)来绑定css样式进行动态控制
index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>
	<!--vue-app是根容器-->
	<div id="vue-app">
	<h1>动态 css Class</h1>
	<h2>示例 1</h2>
	<!-- <div 
	v-on:click="changeColor = !changeColor"
	v-bind:class="{changeColor:changeColor}">
		<span>Henry</span>
	</div> -->

	<h2>示例 2</h2>
	<button @click="changeColor = !changeColor">change Color</button>

	<button @click="changeLength = !changeLength">change Length</button>
		<div v-bind:class="compClasses" >
			<span>Henry</span>
		</div>
	
	</div>

	<script src="app.js"></script>
	
</body>
</html>

app.js

//实例化VUE对象
new Vue({

	el:"#vue-app",
	//仅限于在vue-app容器下
	data:{
		changeColor:false,
		changeLength:false
		},
	methods:{

	},

	/*
	做搜索或者类似的功能的时候
	用计算属性可以很好的优化我们的搜索
	节省我们的时间
	*/
	computed:{
		compClasses:function(){
			return {
				changeColor:this.changeColor,
				changeLength:this.changeLength
			}
		},
		
	}
});

style.css

span{
	background: red;
	display: inline-block;
	padding: 10px;
	color: #fff;
	margin: 10px 0;
}

.changeColor span{
	background: green;
}

.changeLength span:after{
	content: "length";
	margin-left: 10px;
}
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

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

抵扣说明:

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

余额充值