1. 程式人生 > 其它 >Vue 事件修飾符

Vue 事件修飾符

常用的事件修飾符:

  1. prevent :阻止預設事件
  2. stop :阻止事件冒泡
  3. 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>

執行結果