vue之事件修饰符

目录

修饰符

事件修饰服 释义
.stop 只处理自己的事件，子控件不再冒泡给父控件
.self 只处理自己的事件，子控件的冒泡不处理
.prevent 阻止a标签链接的跳转，也可以修改跳转页面
.once 事件只会触发一次(适用于抽奖页面)

.stop事件

<div id="app">
    <ul @click="clickUl">
        <li @click="clickLi">点我触发事件</li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        methods: {
            clickLi() {
                console.log('我是li事件')
            },
            clickUl(){
                console.log('我是ul事件')
            }
        },
    })
</script>

当点击li的事件时，也会触发ul的事件，如下图
image

<div id="app">
    <ul @click="clickUl">
        <li @click.stop="clickLi">点我触发事件</li>  <!--在子事件中加了.stop事件-->
    </ul>
</div>

增加了.stop事件后，再点击li标签，不会再触发li事件
image

.self事件

此事件基本也.stop事件效果相同，只触发自己的事件，子控冒泡的不处理

<div id="app">
    <ul @click.self="clickUl">  <!--事件写在父标签中，不再处理子控件的冒泡-->
        <li @click="clickLi">点我触发事件</li>
    </ul>
</div>

.prevent事件

<div id="app">
    <!--添加.prevent事件后，不再跳转到href指定的地址，可以手工设置跳转的地址-->
    <a href="http://www.baidu.com/" @click.prevent="clickA">点我跳转</a>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        methods: {
            clickA(){
                // 当系统指定的跳转地址后，阻止用户a标签的跳转后，会跳转到指定的地址
                location.href = "http://www.cnblogs.com/"
            }
        },
    })
</script>

.once事件

<body>
<div id="app">
    <!--在添加.once后，只会触发一次点击事件，刷新后才会再次触发-->
    <button @click.once="clickBtn">点我</button>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        methods: {
            clickBtn(){
                console.log('hello world')
            }
        },
    })
</script>
posted @ 2023-04-06 21:50  树苗叶子  阅读(30)  评论(0)    收藏  举报