首页 > 其他 > 详细

Vue时间修饰符

时间:2020-09-05 23:27:11      阅读:64      评论:0      收藏:0      [点我收藏+]

1、stop阻止冒泡

    <style>
        .outer {
            width: 500px;
            height: 300px;
            background: greenyellow;
        }
        .inner {
            width: 300px;
            height: 200px;
            background: hotpink;
        }
        .lastInner {
            width: 150px;
            height: 100px;
            background: mediumaquamarine;
        }
    </style>

    <div id="app">
        <div class="outer" @click="outer">
            <div class="inner" @click.stop="inner">
                <div class="lastInner" @click.stop="lastInner">

                </div>
            </div>
        </div>
    </div>

<script>
       var vm = new Vue({
            el: #app,
            data: {
              
            },
            methods: {
                outer() {
                    console.log("最外层盒子");
                },
                 inner() {
                    console.log("内层盒子");
                },
                 lastInner() {
                    console.log("最内层盒子");
                },
            }
        })
</script>

2、prevent阻止默认事件

   <div id="app">
        <a href="https://www.baidu.com" target="_blank"  @click.prevent="clickA">百度</a>
    </div>

<script>
        var vm = new Vue({
                el: #app,
                data: {
                 
                },
                methods: {
                    clickA() {
                        console.log("点击a标签");
                    }
                }
            })
</script>

3、capture添加事件侦听器时使用事件捕获模式

  <style>
        .outer {
            width: 500px;
            height: 300px;
            background: greenyellow;
        }

        .inner {
            width: 300px;
            height: 200px;
            background: hotpink;
        }

        .lastInner {
            width: 150px;
            height: 100px;
            background: mediumaquamarine;
        }
    </style>

    <div id="app">
        <div class="outer" @click.capture="outer">
            <div class="inner" @click.capture="inner">
                <div class="lastInner" @click="lastInner">

                </div>
            </div>
        </div>
    </div>

<script>
    var vm = new Vue({
        el: #app,
        data: {

        },
        methods: {
            outer() {
                console.log("最外层盒子");
            },
            inner() {
                console.log("内层盒子");
            },
            lastInner() {
                console.log("最内层盒子");
            },
        }
    })
</script>

4、self只当事件在该元素本身(比如不是子元素)触发时触发回调

    <style>
        .outer {
            width: 500px;
            height: 300px;
            background: greenyellow;
        }

        .inner {
            width: 300px;
            height: 200px;
            background: hotpink;
        }

        .lastInner {
            width: 150px;
            height: 100px;
            background: mediumaquamarine;
        }
    </style>

    <div id="app">
        <div class="outer" @click.self="outer">
            <div class="inner" @click.self="inner">
                <div class="lastInner" @click.self="lastInner">

                </div>
            </div>
        </div>
    </div>

<script>
    var vm = new Vue({
        el: #app,
        data: {

        },
        methods: {
            outer() {
                console.log("最外层盒子");
            },
            inner() {
                console.log("内层盒子");
            },
            lastInner() {
                console.log("最内层盒子");
            },
        }
    })
</script>

5、once事件只触发一次

    <style>
        .outer {
            width: 300px;
            height: 200px;
            background: mediumpurple;
        }
    </style>

    <div id="app">
        <div class="outer" @click.once="onlyOne">

        </div>
    </div>

<script>
    var vm = new Vue({
        el: #app,
        data: {

        },
        methods: {
            onlyOne() {
                console.log("只执行一次");
            }
        }
    })
</script>

 

Vue时间修饰符

原文:https://www.cnblogs.com/wangxue13/p/13619568.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!