初识 Vue（11）---(Vue 中的事件绑定)

Vue事件绑定与样式动态变更

最新推荐文章于 2024-05-04 22:57:35 发布

原创最新推荐文章于 2024-05-04 22:57:35 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

28 篇文章

订阅专栏

从浅入深学 Vue

28 篇文章

订阅专栏

本文介绍Vue中如何使用事件绑定实现元素样式的动态变化，包括通过类名和内联样式两种方式，并展示了不同实现方法的具体代码示例。

Vue 中的事件绑定

案例：点击 Hello World ，从黑变红，再次点击，从红变黑...

通过 class 来实现页面效果的变更

方法一：（通过对象）对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中的事件绑定</title>
	<script src="./vue.js"></script>
	<style>
	.activated{color: red;}
	</style>
</head>
<body>
	<div id="app">
		<div @click="handleDivClick"
		:class="{activated:isActivated}">     
		Hello World
	</div>
		
	<script>
	var vm = new Vue({
		el:"#app",
		data:{isActivated:false},
		methods: {
			handleDivClick:function(){
				this.isActivated = !this.isActivated;
			}
		}
	})
	</script>
</body>
</html>

输出：

点击

再点击

方法二：（通过数组）将 activated 放置在数组中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中的事件绑定</title>
	<script src="./vue.js"></script>
	<style>
	.activated{color: red;}
	</style>
</head>
<body>
	<div id="app">
		<div @click="handleDivClick"
		:class="[activated]">     
		Hello World
		</div>
	</div>	
	<script>
	var vm = new Vue({
		el:"#app",
		data:{
			activated:""
		},
		methods: {
			handleDivClick:function(){
				if(this.activated === "activated"){
					this.activated = "";
				}else{
					this.activated="activated";

		//this.activated = this.activated === "activated" ? "" : "activated"
				}
			}
		}
	})
	</script>
</body>
</html>

补充：

动态的给一个DOM元素添加或删除不同的类，从而实现页面效果的变更

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中的事件绑定</title>
	<script src="./vue.js"></script>
	<style>
	.activated{color: red;}
	</style>
</head>
<body>
	<div id="app">
		<div @click="handleDivClick"
		:class="[activated,activatedOne]">     
		Hello World
		</div>
	</div>	
	<script>
	var vm = new Vue({
		el:"#app",
		data:{
			activated:""
			activatedOne:"activated-one"
		},
		methods: {
			handleDivClick:function(){
				if(this.activated === "activated"){
					this.activated = "";
				}else{
					this.activated="activated";

		//this.activated = this.activated === "activated" ? "" : "activated"
				}
			}
		}
	})
	</script>
</body>
</html>

输出：类从 activated 变更为 activated-one

通过 style 来实现页面效果的变更

方法一：（通过对象）第一次为 black,故显示为黑色，当等于 black 则返回 red,则第二次显示红色，返回black...达到颜色变更的目的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中的事件绑定</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<div :style="styleobj" @click="handleDivClick"> 
		Hello World
		</div>
	</div>	
	<script>
	var vm = new Vue({
		el:"#app",
		data:{
			styleobj:{
				color:"black"
			}
		},
		methods: {
			handleDivClick:function() {
				this.styleobj.color = this.styleobj.color ==="black"?"red" :"black"	;
				}
			}
			
		
	})
	</script>
</body>
</html>

输出：

点击

再点击

方法二：（通过数组）（只需将 styleobj 放入数组即可）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中的事件绑定</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<div :style="[styleobj]" @click="handleDivClick"> 
		Hello World
		</div>
	</div>	
	<script>
	var vm = new Vue({
		el:"#app",
		data:{
			styleobj:{
				color:"black"
			}
		},
		methods: {
			handleDivClick:function() {
				this.styleobj.color = this.styleobj.color ==="black"?"red" :"black"	;
				}
			}
			
		
	})
	</script>
</body>
</html>

如果 style 后面跟着一个数组，DIV 的样式由数组里的对象所决定，这个对象有 color:"black";所以 DIV 显示黑色，第一次为 black,故显示为黑色，当等于 black 则返回 red,则第二次显示红色，返回black...达到颜色变更的目的。