Vue 事件修飾符
阿新 • • 發佈:2022-04-04
常用的事件修飾符:
- prevent :阻止預設事件
- stop :阻止事件冒泡
- once :事件只觸法一次
使用示例
<!-- 未使用 -->
<a href="https://www.cnblogs.com/barwenyan/" @click="showInfo">未阻止跳轉</a>
<!-- 使用阻止預設事件修飾符 -->
<a href="https://www.cnblogs.com/barwenyan/" @click.prevent="showInfo">阻止跳轉</a>
例項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修飾符</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <a href="https://www.cnblogs.com/barwenyan/" @click.prevent="showInfo">阻止跳轉</a> </div> <script type="text/javascript"> new Vue({ el: '#root', methods: { showInfo() { alert('你好') } } }) </script> </body> </html>
執行結果