Vue修饰符

Vue修饰符

事件修饰符

  1. .stop 阻止事件冒泡

  2. .self 只在点击自身时才会触发对应的事件

  3. .prevent 阻止事件默认行为

  4. .once 只会执行一次

 

.stop 阻止事件冒泡

<div class="child" @click.stop="childFn">子级</div>

 

.self 只在点击自身时才会触发对应的事件

<div class="parent" @click.self="parentFn">  父级 </div>

 

.prevent 阻止事件默认行为

<a href="http://www.baidu.com" @click.prevent.stop="baiduFn">百度一下</a>

 

.once 只会执行一次

<button @click.once="clickfn">点击</button>

 

按键修饰符

按键修饰符 回车键是 .enter @keyup键盘事件

用户名: <input type="text" @keyup.enter="enterFn" @keyup.up="upFn">

 

表单修饰符

  1. .trim 去除前后空格

  2. .number 输入值规定为数值类

  3. .lazy 不立即完成内容更新,当用户完成输入,失焦或回车后才更新内容

 

.trim 去除前后空格

账号: <input type="text" v-model.trim="username">
    {{username}}

 

.number 输入值规定为数值类

年龄: <input type="text" v-model.number="age">
{{age}}

 

.lazy 不立即完成内容更新,当用户完成输入,失焦或回车后才更新内容

搜索: <input type="text" v-model.lazy="search">
          {{search}}

 

注意事项

  1. 修饰符可以多个使用 例:@click.stop.self.once

  2. 修饰符使用在事件之后 例:@click.stop

posted @ 2022-11-01 09:16  Dollom  阅读(27)  评论(0)    收藏  举报