Vue.js使用v-on绑定事件

时间:2022-01-06作者:klpeng分类:IT综合浏览:617评论:0

        使用 v-on:事件名= "触发事件" 可以用来绑定标签事件。也可以缩写为@事件名="触发事件" 。事件如:点击,双击,键盘按下等。当触发该事件后,就会调用语句执行。

        常见的事件:

        click: 点击一次;   当鼠标点击,触发事件

        dblclick: 双击;当鼠标双击,触发事件

        focus: 获取焦点;  当得到了光标,触发事件

        blur: 失去焦点;   当失去了光标,触发事件

        mouseover:鼠标移至;  鼠标移至某标签上方,触发事件

        mouserout:鼠标移出; 鼠标移出某标签上方,触发事件

        keyup:键盘按下;  键盘按下,触发事件

        对于触发某事件会做出的某响应可以为 函数语句对象。可以当触发事件后调用一个函数,一条语句。

        代码示例:   给三个按钮"-","+","更新得分"三个按钮标签添加点击事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="count--" >-</button>
			<div >当前得分为: {{count}}</div>  			
			<button @click="increment()" >+</button> <br>
			<button @click="message = '总分为:'+count" >更新得分</button>
			<div>{{message}}</div>
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{   
					message:"",
					count:0
					
				},
				methods:{
					increment(){
						this.count++;
					}
				}
			});	
		</script>
	</body>
</html>

        页面效果:  点击-按钮会减分,加点+会加分,点击更新得分会更新下面的数据

Vue.js使用v-on绑定事件

         函数中也可以传入$event,将event事件对象传入函数中进行处理。传入$event对象后,函数可以提供一个参数用于接收,包含了触发这个事件的所有参数。

        

        代码示例:  输入框输入数据,按了回车会有提示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" @keyup="show($event)">
		</div>
		<script>
			const app = new Vue({
				el:"#app",
				data:{   
					message:"",
				},
				methods:{
					show(event){
						console.log(event);
						if(event.keyCode==13){
							alert("你按了回车")
						}
					}
				}
			});	
		</script>
	</body>
</html>

        页面效果: 

Vue.js使用v-on绑定事件

Vue.js使用v-on绑定事件

        事件修饰符

        1、阻止冒泡 stop

         阻止冒泡的意思是,当某一个标签的事件触发也会触发该标签的父标签的事件。为了阻止此情况的发生,在绑定事件后面加上  .prevent 。如@click.stop= "函数名";

        代码测试:  叠三个div标签,在最里面div标签加入一个按钮。每个标签都绑定相同的事件函数,只是传入的值不一样

        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app" @click="show('4')">
			<div @click="show('3')">
				<div @click="show('2')">
					<button @click="show('1')">按钮</button>
				</div>
			</div>
		</div> 
		<script>
			const app = new Vue({
				el:"#app",
				data:{   
					
				},
				methods:{
					show(num){
						console.log("我被点了:"+num);
					}
				}
			});	
		</script>
	</body>
</html>

        当我们在页面点击一下按钮,控制台会出现:

Vue.js使用v-on绑定事件

        当我们在按钮的点击事件加上prevent后。

<button @click.stop="show('1')">按钮</button>

         再次点击按钮就只会输出按钮的事件响应

Vue.js使用v-on绑定事件

 

                

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢