vue中事件修饰符.once.self.stop.prevent

最新推荐文章于 2022-08-05 21:30:44 发布

源@

最新推荐文章于 2022-08-05 21:30:44 发布

阅读量429

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_48727085/article/details/108545277

版权

<!DOCTYPE HTML>
<html lang= 'en'>
	<head>
		<meta charset = 'UTF-8'/>
	</head>
	<body>
		<div id = 'box'>
			<button @click = 'handleClick'>click</button>
			<button @click = 'handleClick()'>click2</button>
			<div v-show = 'isShow'>11111111</div>
			<!--@click.self 会判断事件源是否为自己-->
			<ul @click.self = 'handleUlClick'>
				<!--@click.stop 阻止冒泡-->
				<li @click.stop = 'handleLiClick($event)'>11111</li>
				<li @click = 'handleLiClick()'>22222</li>
				<!--@click.once 规定只能点击一次-->
				<li @click.once = 'handleLiClick()'>33333</li>
			</ul>
			<!--@click.prevent 组织默认行为-->
			<a href = 'http://www.baidu.com' @click.prevent = 'handleChangePage()'>changePage</a>
		</div>
		<script src = 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
		<script>
			var vm = new Vue({
				el:'#box',
				data:{
					isShow:true,
				},
				methods:{
					handleClick(){
						this.isShow = !this.isShow;
					},
					handleLiClick(ev){
						//这个方法是用来阻止冒泡
						//ev.stopPropagation();
						console.log('li');
					},
					handleUlClick(){
						console.log('ul');
					},
					handleChangePage(){
						console.log('handleChangePage');
					}
				},
			});
		</script>
	</body>
</html>

优惠劵

源@

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中事件修饰符.once.self.stop.prevent

<!DOCTYPE HTML><html lang= 'en'> <head> <meta charset = 'UTF-8'/> </head> <body> <div id = 'box'> <button @click = 'handleClick'>click</button> <button @click = 'handleClick()'>click
复制链接

扫一扫