美文网首页
vue事件修饰符

vue事件修饰符

作者: 成长储存罐 | 来源:发表于2019-10-28 15:37 被阅读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,则表示真假 --- 购物车中的选择

相关文章

  • Vue事件修饰符

    Vue 事件修饰符 事件修饰符结合使用

  • vue中的修饰符

    事件修饰符 使用vue,让代码中只有纯粹的数据逻辑,而不是去处理DOM事件细节。 ---事件修饰符vue事件修饰符...

  • 2020-12-29

    Vue修饰符和事件 Vue修饰符:用来修饰事件的操作例如: 代码举例:阻止默认动作 1、v-on和其他支持的修饰符...

  • 在vue中使用.stop阻止单击事件继续传播

    一、vue的事件修饰符 为了不在方法中处理DOM事件细节,vue中提供6个事件修饰符。分别是: .stop .pr...

  • Vue事件修饰符详解

    Vue事件修饰符详解(转) 整体学习Vue时看到Vue文档中有事件修饰符的描述,但是看了之后并没有理解是什么意思,...

  • vue30道面试题

    vue的修饰符 1.事件修饰符 prevent 阻止默认事件(在指定的事件后进行默认事件的阻止) stop阻止事件...

  • Vue.js 事件修饰符

    事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventD...

  • vue事件、指令、钩子

    vue事件、指令、钩子 vue的事件修饰符:.stop:阻止冒泡.prevent:阻止默认行为.capture:捕...

  • vue事件修饰符

    js事件默认冒泡: 点击内层的元素会触发外层的事件。(解决方法如下:) 事件修饰符 vue提供了事件修饰符,...

  • 31.Vue v-model 修饰符

    与 Vue事件修饰符 类似,v-model也有修饰符,用于控制数据同步。 案例

网友评论

      本文标题:vue事件修饰符

      本文链接:https://www.haomeiwen.com/subject/jjjbvctx.html