VUE事件修飾符總結

對事件添加一些通用的限制，比如阻止事件冒泡，Vue 對這種事件的限制提供了特定的寫法，稱之爲修飾符 用法：v-on:事件.修飾符

    <!--阻止事件冒泡.stop-->
    <div id="div1" class="stop" @click.stop="event1(1)">
    <!--使用事件捕獲模式.capture-->
    <div id="div4" class="stop" @click.capture="event1(4)">
    <!--事件只作用本身.self，類似於已阻止事件冒泡-->
    <div id="div7" class="stop" @click.self="event1(7)">
    <!--阻止瀏覽器默認行爲.prevent-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent="prevent">dk's github</a>
    <!--只作用一次.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.once="prevent">dk's github</a>
    <!--修飾符可以串聯.click.prevent.once-->
    <a href="https://github.com/dk-lan" target="_blank" @click.prevent.once="prevent">dk's github</a>

#按鍵修飾符

<div id="app">
    <fieldset>
        <legend><h3>ASCII = 13 時觸發</h3></legend>
        <p></p>
        <input @keyup.13="submit">  
    </fieldset>
    <fieldset>
        <legend><h3>按回車鍵時觸發</h3></legend>
        <p></p>
        <input @keyup.enter="submit">
    </fieldset> 
    <fieldset>
        <legend><h3>自定義按鍵 Vue.config.keyCodes.number1 = 49</h3></legend>
        <input @keyup.number1="submit" />       
    </fieldset> 
</div>

#表單修飾符

	    <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="counter">  
        <!-- 自動將用戶的輸入值轉爲 Number 類型（如果原值的轉換結果爲 NaN 則返回原值） -->
        <input v-model.number="counter" type="number">          
        <!-- 自動過濾用戶輸入的首尾空格 -->
        <input v-model.trim="counter">  

---

作者：danielyulu
來源：CSDN
原文：https://blog.csdn.net/weixin_41817034/article/details/80448262