vue事件修饰符多个一起使用
vue中的事件修饰符有哪些？vue事件修饰符有阻止冒泡stop、阻止默认事件prevent、添加事件侦听器时使用事件捕获模式capture、只当事件在该元素本身触发时触发回调self 、事件只触发一次once这几个主要的vue事件修饰符，他们的具体介绍可以看文章《5个常用的vue事件修饰符》本文是讲vue事件修饰符多个一起使用。
vue事件修饰符多个一起使用实例代码如下：
<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf" />
<title>vue事件修饰符多个一起使用</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 600px;
margin: 100px auto;
}
.box {
height: 200px;
background: red;
padding: 50px;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="box">
<!-- 阻止冒泡和阻止默认事件 -->
<a href="https://tangjiusheng.com" @click.stop.prevent="btn">点我进入首页</a>
</div>
</div>
<script type="text/javascript" src="https://tangjiusheng.com/vue/lib/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
box() {
console.log('这是触发了 box div 的点击事件！')
},
btn() {
console.log('这是触发了 btn 按钮 的点击事件！')
}
}
});
</script>
</body>
</html>点击查看效果：https://tangjiusheng.com/vue/page20220516.html
说明：要多个事件修饰符一起使用，用链式编程方式这样使用就行。stop事件修饰符阻止了冒泡点击a不是触发box函数，prevent事件修饰符阻止了a的跳转。
除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.com/vue/373.html
原文地址：https://tangjiusheng.com/vue/373.html
赣公网安备36072102000190