vue事件-修饰符 / stop / prevent / once
作者:互联网
3.5_vue指令-v-on修饰符
目的: 在事件后面.修饰符名 - 给事件带来更强大的功能
- 语法:
- @事件名.修饰符=“methods里函数”
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数
- @事件名.修饰符=“methods里函数”
<template>
<div>
<!-- 无传参,通过形参直接接收 -->
<a @click="oneFn" href="http://www.baidu.com">不要跳转百度</a>
<hr>
<!-- $event 是固定写法,既需要传递实参,又需要传递事件对象的时候使用 -->
<a @click="twoFn(10,$event)" href="http://www.baidu.com">不要跳转百度222</a>
<hr>
<!-- @事件名.修饰符="methods里的函数" -->
<!-- .stop - 阻止事件冒泡 -->
<!-- .prevent - 阻止默认行为 -->
<!-- .once - 程序运行期间,只触发一次事件处理函数 -->
<a @click.prevent="" href="http://www.baidu.com">不要跳转百度33333</a>
<hr>
<button @click.once="btnFn">点击抽奖</button>
<hr>
<div @click="fatherFn"> 父元素
<button @click.stop="sonFn">子元素</button>
</div>
</div>
</template>
<script>
export default {
// 函数 / 方法放 methods 中
methods:{
oneFn(e){
// 通过事件对象阻止默认行为
e.preventDefault()
},
twoFn(number,e){
e.preventDefault()
console.log(number);
console.log(e);
},
btnFn(){
alert("恭喜您抽取中五元玛莎拉蒂代金券")
},
fatherFn(){
console.log('老子腿给你打断')
},
sonFn(){
console.log('小子去泡妞')
}
}
}
</script>
<style>
</style>
标签:prevent,vue,console,log,修饰符,事件,跳转,methods 来源: https://blog.csdn.net/Henry_ID/article/details/118603736