07 Vue中样式绑定方法三种方法汇总

最新推荐文章于 2024-05-09 10:29:14 发布

技术~子云

最新推荐文章于 2024-05-09 10:29:14 发布

阅读量572

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/davice_li/article/details/127466875

版权

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

1 第一种方法使用class 进行绑定样，通过 activated 真假来控制

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中样式绑定1</title>
		<script src="../vue.js"></script>
		<style type="text/css">
			.activated{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div @click = "handleDivClick"
				 :class ="{activated:isActivated}"
			>
				Hello World
			</div>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({

				el:"#app",
				data:{
					isActivated:false
				},
				methods:{
					handleDivClick:function(){
						this.isActivated= !this.isActivated;
					}
				}
			})
		</script>

	</body>
</html>

第二种方法通过数据的形式来进行

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中样式绑定2</title>
		<script src="../vue.js"></script>
		<style type="text/css">
			.activated{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- activated 可以绑定数据data 里的值 来设置样式 -->
			<div @click = "handleDivClick"
				 :class ="[activated,activatedOne]"
			>
				Hello World
			</div>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({

				el:"#app",
				data:{
					activated:"",
					activatedOne:"activated-one"
				},
				methods:{
					handleDivClick:function(){
						//三目运算符减化if else 语法
						this.activated = this.activated ==="activated" ?"" :"activated";
					}
				}
			})
		</script>

	</body>
</html>

第三种方法直接使用 style方法来实现样式绑定

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Vue中样式绑定2</title>
		<script src="../vue.js"></script>
		<style type="text/css">
			.activated{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- activated 可以绑定数据data 里的值 来设置样式 -->
			<div @click = "handleDivClick"
				 :style ="[styleObj]"
			>
				Hello World
			</div>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({

				el:"#app",
				data:{
					styleObj:{
						color:"black"
					}
				},
				methods:{
					handleDivClick:function(){
						//三目运算符减化if else 语法
						//如果样式是黑色的，就变成红色的，否则就取反
						this.styleObj.color = this.styleObj.color ==="black" ?"red" :"black";
					}
				}
			})
		</script>

	</body>
</html>