vue事件修饰符

2019-10-28  本文已影响0人  成长储存罐

阻止冒泡 v-on:click.stop="fn()"

阻止默认事件 v-on:click.prevent="fn"

阻止冒泡阻止默认事件 v-on:click.stop.prevent="fn"

.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的

.once 点击事件将只会触发一次

.passive 不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。

按键修饰符:

以前如果有一个表单输入框,当你输入之后敲回车想要打印值

if (event.keyCode === 13) {name.value}

vue

.tab

.delete

.esc

.space

.up

.down

.left

.right

系统修饰符

.ctrl

.alt

.shift

.meta

表单修饰符

v-model.lazy 失去焦点或者按回车键时才会运算

v-model.trim 得到的值去除两端空格

v-model.number 唤起数字键盘

 原生js如果要做正则的校验,失去焦点、键盘弹起时

vue 中 可以使用 侦听属性 或者 计算属性 去做

v-model

唯一特殊的就是 checkbox

如果初始值为 数组,则表示多选框

如果初始值为 boolean,则表示真假 --- 购物车中的选择

上一篇 下一篇

猜你喜欢

热点阅读