这篇文章主要为大家介绍了Vue之事件处理和事件修饰符,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
<div id="root"> <h2>{{name}},加油!</h2> <!-- 阻止默认事件 --> <a @click.prevent="showInfo" href="https:www.baidu.com">点我提示信息</a> <!-- 阻止事件冒泡 --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button> </div> <!-- 事件只触发一次 --> <button @click.once="showInfo">点我提示信息</button> <!-- 使用事件捕获模式 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件 --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> </div> <script> Vue.config.productionTip = false; new Vue({ el: '#root', data() { return { name: '张三' } }, methods: { showInfo(e) { // e.preventDefault(); alert('王同学,你好!') }, showMsg(msg) { console.log(msg); } } }); </script>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注北冥有鱼的更多内容!
您可能感兴趣的文章:
- Vue中sync修饰符分析原理及用法示例
- Vue重要修饰符.sync对比v-model的区别及使用详解
- vue使用once修饰符,使事件只能触发一次问题
- vue中的事件修饰符once,prevent,stop,capture,self,passive
- vue5中的事件修饰符(style)和template
- 面试最常问的13种Vue修饰符
- 详解Vue的sync修饰符
- Vue常用的修饰符的作用详解