Vue-动态绑定CSS样式

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

丰柏林

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

阅读量1.5k

点赞数

分类专栏： vue学习笔记文章标签： vue如何动态绑定css

本文链接：https://blog.csdn.net/qq_40647912/article/details/89914964

版权

vue学习笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

在这一片博客里面主要讲解了如何通过@: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
评论
Vue-动态绑定CSS样式

在这一片博客里面主要讲解了如何通过@:click也就是（v-on:click）来绑定css样式进行动态控制index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <link rel="...
复制链接

扫一扫

专栏目录