channnal

导航

VUE-修饰符

 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

1. 事件修饰符:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once (还可被用至自定义的组件事件上)
  • .passive (尤其能够提升移动端的性能)

2.  按键修饰符:

  按键码:(已被废弃,最新浏览器可能不支持)

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

3.  系统修饰键:

  可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl
  • .alt
  • .shift
  • .meta
  • .exact (允许你控制由精确的系统修饰符组合触发的事件。)

4.  鼠标按钮修饰符:

  这些修饰符会限制处理函数仅响应特定的鼠标按钮。

  • .left
  • .right
  • .middle

5.  .lazy

  你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

  <!-- 在“change”时而非“input”时更新 -->

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

6.  .number

  自动将用户的输入值转为数值类型

7.  .trim

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

8.  .prevent 阻止事件的默认行为,

<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> //阻止a标签跳转,仅执行函数test4
<form action="/xxx" @submit.prevent="test5"> //阻止表单提交,仅执行函数test5
<input type="submit" value="注册">
</form>

posted on 2020-01-17 15:03  channnal  阅读(221)  评论(0编辑  收藏  举报