vue-事件修饰

本文主要是介绍vue-事件修饰，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.阻止冒泡事件

<template><div  @click.self="onOutClick"><div  @click="onInnerClick">div</div></div>
</template><script>export default {data() {return {};},methods: {onOutClick(){console.log('外面的div');},onInnerClick(){console.log('里面的div');},},}
</script>
<style scoped></style>

2.取消a标签默认事件

<template><a @click.prevent="linkClick" href="http://www.baidu.com">链接</a>
</template><script>export default {data() {return {};},methods: {linkClick(){console.log('linkClick');}},}
</script>
<style scoped></style>

3.只允许按钮被点击一次

<template><p @click.once="linkClick">链接</p>
</template><script>export default {data() {return {};},methods: {linkClick(){console.log('linkClick');}},}
</script>
<style scoped></style>

 

这篇关于vue-事件修饰的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---