修饰符的使用.stop .prevent .enter .once

最新推荐文章于 2024-06-26 08:53:16 发布

wendyNo

最新推荐文章于 2024-06-26 08:53:16 发布

阅读量234

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wendyNo/article/details/112528942

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

阻止冒泡 .stop

<body>
	<div id="app">
		<h2>{{num}}</h2>
		<div @click="divclick">aaaaa
			<button @click.stop="btnclick">按钮</button>
		</div>
	</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			num:1
		},
		methods:{
			divclick(){
				console.log('divclick');
			},
			btnclick(){
				console.log('btnclick');
			}
		}

	});
</script>
</body>

阻止默认事件.prevent

<body>
	<div id="app">
		<form action="baidu">
			<input type="submit" name="" @click.prevent="submitClick">
		</form>
	</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			num:1
		},
		methods:{
			submitClick(){
				console.log('提交');
			}
		}

	});
</script>
</body>

监听某个键盘的建帽.enter

<body>
	<div id="app">
		<input type="text" name="" value="" @keyup.enter="keyUp">
	</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			num:1
		},
		methods:{
			keyUp(){
				console.log('keyUp');
			}
		}

	});
</script>
</body>

监听某个事件只执行一次.once

<body>
	<div id="app">
		<button @click.once="btn">按钮2</button>
	</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el: "#app",
		data: {
			num:1
		},
		methods:{
			btn(){
				console.log(111)
			}
		}
	});
</script>
</body>