VUE事件修饰符总结

最新推荐文章于 2023-05-05 14:19:26 发布

原创最新推荐文章于 2023-05-05 14:19:26 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue事件修饰符

vue 专栏收录该内容

35 篇文章

订阅专栏

对事件添加一些通用的限制，比如阻止事件冒泡，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">  
        <!-- 输入事件 -->
         <input @input="change">

作者：danielyulu
来源：优快云
原文：https://blog.youkuaiyun.com/weixin_41817034/article/details/80448262