Loading

Vue中@click、@click.stop和@click.prevet用法

@click、@click.stop和@click.prevet用法#

1、绑定监听@click;

2、@click.stop: 阻止事件冒泡;

3、@click.prevent: 阻止事件的默认行为;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div v-on:click='handle0'>
<button v-on:click.stop='handle1'>点击1</button>
</div>
<div>
<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle0: function(){
this.num++;
},
handle1: function(event){
// 阻止冒泡
// event.stopPropagation();
},
handle2: function(event){
// 阻止默认行为
// event.preventDefault();
}
}
});
</script>
</body>
</html>

作者:apebro

出处:https://www.cnblogs.com/apebro/p/12601412.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   平头猿小哥  阅读(4083)  评论(0编辑  收藏  举报
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示