06.v-on的修饰符 

<body>
    <div id="app">
        <div @click="divClick">
            123456789
            <!-- 1  .stop修饰符的使用 阻止冒泡 -->
            <button @click.stop="btnClick">按钮</button>
        </div>

        <!-- 2  .prevent修饰符的使用  阻止默认行为 -->
        <form action="百度">
            <input type="submit" value="提交" @click.prevent="submitClick">
        </form>

        <!-- 3 .once修饰符的使用  只执行一次 -->
        <input type="submit" value="提交2" @click.once="submit2Click">
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                divClick() {
                    console.log("div被点击了");
                },
                btnClick() {
                    console.log('btn被点击了');
                },
                submitClick() {
                    console.log("submit");
                },
                submit2Click() {
                    console.log("只提交一次");
                }

            }
        })
    </script>
</body>

 

posted @ 2020-12-28 21:32  闭上耳朵  阅读(70)  评论(0)    收藏  举报