v-on 修饰符

最新推荐文章于 2024-12-14 21:39:33 发布

原创最新推荐文章于 2024-12-14 21:39:33 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue中用于事件处理的修饰符，包括.stop用于阻止事件冒泡，.prevent用于防止默认事件的发生，.{keyCode|keyAlias}用于指定监听的键盘按键，以及.once修饰符，确保事件回调只执行一次。

Vue提供了一些修饰符来帮助我们处理一些事件
1）.stop -阻止冒泡

<div id="xixi" @click="divClick">
	<button @click.stop="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#xixi',
		methods:{
			btnClick:function(){
				console.log('btnClick');
			},
			divClick:function(){
				console.log('divClick');
			}
		}	
	});
</script>

2）.prevent -阻止默认事件停止默认行为

<form action="https://www.baidu.com" id="xixi">
	<input type="submit" name="提交"  @click.prevent="inputSubmit">
</form>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#xixi',
		methods:{
			inputSubmit:function(){
				console.log('inputSubmit');
			}
		}	
	});
</script>

3）.{keyCode|keyAlias}监听键盘按键

<div id="xixi">
	<input type="text" name="" @keyUp.enter="keyClick">
</div>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#xixi',
		methods:{
			keyClick:function(){
				console.log('keyClick');
			}
		}	
	});
</script>