Getting to know Vue (event binding in Vue)

Event binding in Vue

Case: click Hello World, change from black to red, click again, change from red to black

Change the page effect by class

Method 1: object binding

​​<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue Event binding in</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>

Output:

click

Click again

Method 2: put the activated in the array

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue Event binding in</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>

Supplement:

Dynamically add or delete different classes to a DOM element, so as to change the page effect

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue Event binding in</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>

Output: class changed from activated to activated one

 

Change page effect through style

Method 1: (through object) the first time is black, so it is displayed as black. When it is equal to black, it returns red, then it displays red for the second time, and returns black... To achieve the purpose of color change

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue Event binding in</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>

Output:

click

Click again

Method 2: (by array) (just put styleobj into the array)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue Event binding in</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>

If style is followed by an array, the style of DIV is determined by the objects in the array. This object has color:"black"; therefore, DIV displays black for the first time, so it displays black. When it is equal to black, it returns red, then it displays red for the second time, and returns black... To achieve the purpose of color change.

 

Tags: Vue

Posted on Fri, 31 Jan 2020 21:15:24 -0800 by Derfel Cadarn