美文网首页
vue中的修饰符

vue中的修饰符

作者: __黑 | 来源:发表于2020-06-15 11:53 被阅读0次

    事件修饰符:
    .stop //阻止事件冒泡
    .prevent //阻止默认事件
    .capture
    .self
    .once
    .passive

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
    
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
    

    还有些按键修饰符可以看官方文档,有版本要求
    https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

    相关文章

      网友评论

          本文标题:vue中的修饰符

          本文链接:https://www.haomeiwen.com/subject/gaecxktx.html