Skip to main content

修饰符

事件修饰符​

Vue.js 为 v-on 提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。

  • stop：阻止事件继续传播
  • prevent：阻止事件默认行为
  • capture：添加事件监听器时使用事件捕获模式
  • self：当前元素触发时才触发事件处理函数
  • once：事件只触发一次
  • passive：告诉浏览器你不想阻止事件的默认行为，不能和.prevent 一起使用。
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="toDo"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="toSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="toDo"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="toDo">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div v-on:click.self="toDo">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="toDo"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<div v-on:scroll.passive="onScroll">...</div>

表单修饰符​

  • .lazy 在输入框输入完内容，光标离开时才更新视图
  • .trim 过滤首尾空格
  • .number 如果先输入数字，那它就会限制你输入的只能是数字;如果先输入字符串，那就相当于没有加.number

参考​