vue修饰符(事件修饰符、v-model修饰符、键盘修饰符、自定义键盘修饰符)

·  阅读 644
vue修饰符(事件修饰符、v-model修饰符、键盘修饰符、自定义键盘修饰符)

事件修饰符

.stop:阻止事件冒泡,相当于调用了 event.stopPropagation()方法

<button @click.stop="test"></button>
复制代码

.prevent: 阻止默认行为,相当于调用了 event.preventDefault()方法,比如表单的提交、 a 标签的跳转就是默认事件

<a href="" @click.prevent="test"></a>
复制代码

.self: 只有点击元素本身才会触发。比如一个 div里面有个按钮, div 和按钮都有事件,我们点击按钮, div 绑定的方法也会触发,如果 div的 click 加上 self,只有点击到 div 的时候才会触发,变相的算是阻止冒泡。

<button @click.self="test">...</button>
复制代码

.once: 事件只能触发一次,无论点击多少次,执行第一次之后就不执行了

<button @click.once="test"></button>
复制代码

.captrue: 捕获冒泡,即有冒泡发生时,有该修饰符的dom元素会先执行,如果有多个,从外到内依次执行,然后再按自然顺序执行触发的事件。

<div id="obj1" @click="doc">
    <div id="obj2" @click.capture="doc">
          <div id="obj3" @click.capture="doc">
              <div id="obj4" @click="doc">
                <!-- 点击obj4的时候,弹出的顺序为:obj2、obj3、obj4、obj1;因为2有.captrue修饰符,故而先触发事件,由外到内,然后就是4本身触发,最后冒泡事件。-->
            </div>
          </div>
     </div>
</div>
复制代码

v-model 修饰符

.lazy: 默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,让光标离开input框数据再同步

<input type="text" v-model.lazy="value">
复制代码

.number: 自动将用户的输入值转化为数值类型

<input v-model.number="value">
复制代码

.trim: 过滤输入框首尾的空格

<input type="text" v-model.trim="value">
复制代码

键盘修饰符

Vue 提供了绝大多数常用的按键码的别名

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

自定义键盘修饰符

<input type="text" placeholder="按下F5" @keyup.f5="handle" />
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改