<!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>
vue中事件修饰符.once.self.stop.prevent
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/108545277
今日推荐
周排行