v-on的修饰符使用_von: click如何写修饰符-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42867002/article/details/108163584

本文深入探讨Vue.js中事件修饰符的使用方法，包括如何阻止事件冒泡、防止默认行为、监听特定按键以及限制事件仅执行一次。通过具体代码示例，详细解释了click.stop、click.prevent、keyup及click.once等修饰符的功能与应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.v-on:click.stop=""

 //点击按钮1会触发div的事件，但点击按钮2不会
<div class="app" v-on:click="appClick">
        <button v-on:click="btnClick1">按钮1</button>
        <button v-on:click.stop="btnClick2">按钮2</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'.app',
            methods:{
                appClick(){
                    console.log("这是app点击事件")
                },
                btnClick1(){
                    console.log("这是btn1点击事件")
                },
                btnClick2(){
                    console.log("这是btn2点击事件")
                }
            }
        })
    </script>

2.v-on:click.prevent=""

//prevent阻止默认事件，可以串联使用
<div class="app" v-on:click="appClick">
        <!-- 提交事件不再重载页面 -->
        <form action="baidu">
            <input type="submit" value="提交事件1" v-on:click.prevent="onSubmit"/>
            <input type="submit" value="提交事件2" v-on:click.stop.prevent="onSubmit"/>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'.app',
            methods:{
                appClick(){
                    console.log("这是app点击事件")
                },
                onSubmit(){
                    console.log("这是提交事件")
                }
            }
        })
    </script>

3.v-on:keyup=""

//按键事件：可以设定多个案件的值
<div class="app">
        <input v-on:keyup.left.right.enter.90="keyup"/>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:".app",
            methods:{
                keyup(){
                    console.log("按下了按键")
                }
            }
        })
    </script>

4.v-on:click.once=""

//让事只执行一次
<div class="app">
        <button v-on:click.once="btn">按钮</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:".app",
            methods:{
                btn(){
                    console.log("这是一个点击事件")
                }
            }
        })
    </script>