标签：Vue self 修饰符 stop 事件 once

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

标签：Vue,self,修饰符,stop,事件,once
From： https://www.cnblogs.com/Dollom/p/16846620.html