vue 修饰符

1.常用事件修饰符
.stop
.prevent
.capture
.self
.once
.passive

<div @click.self="parentClick">
<a href="javascript:void(0)" @click.stop="childClick"></a>
</div>

<form @submit.prevent="onSubmit"></form>

<form @submit.stop.prevent="doSomething"></form>

<form @submit.prevent></form>

<div class="div1" @click="click1">
<div class="div2" @click.capture="click2">
<div class="div3" @click="click3"></div>
</div>
</div>

<el-select v-model="value" placeholder="请选择" @change.once="selectChange">
......
</el-select>

<div @scroll.passive="onScroll">
......
</div>

2.按键修饰符
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
<input type="text" @keyup.enter="submit">
3.系统修饰符
.ctrl

.alt

.shift

.meta

.exact

需要注意的是，在Mac电脑上，meta对应command键。

<input type="text" @keyup.alt.67="clear">

.exact

<button @click.ctrl="onClick"></button>

<button @click.ctrl.exact="onCtrlClick"></button>

<button @click.exact="onclick"></button>

4,其他的常用的修饰符
.number
.lazy
.trim
.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">
.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
(除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

<input v-model.lazy="msg">
.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

作者：艾晓雪
链接：https://www.jianshu.com/p/e5d110873c90
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。