跳到主要内容

Vue 修饰符有哪些

面试速答（30 秒版 TL;DR）​

  • 常考的修饰符主要在：v-on（事件）、v-model（取值/时机）、键盘/鼠标事件、v-bind（少见）。
  • 本质：在编译阶段把模板语法转换成带特定逻辑的事件处理或赋值逻辑。

v-on（事件）修饰符（最高频）​

  • .stop：stopPropagation
  • .prevent：preventDefault
  • .capture：捕获阶段监听
  • .once：只触发一次
  • .self：只在事件源是自身元素时触发
  • .passive：被动监听（提升滚动性能，但不能 preventDefault）

示例：

<button @click.stop.prevent="onClick">提交</button>

键盘/鼠标修饰符（常见加分）​

  • 键盘：.enter、.esc、.tab、.delete、.space、.up、.down、.left、.right
  • 系统修饰键：.ctrl、.alt、.shift、.meta
  • 鼠标：.left、.right、.middle

v-model 修饰符​

  • .trim：自动 trim()
  • .number：尝试转数字
  • .lazy：改成在 change 时更新（而不是 input）
<input v-model.trim="name" />
<input v-model.number="age" />
<input v-model.lazy="value" />

其他（了解即可）​

  • Vue 2 的 .sync：常用于“类似双向绑定”的 props 更新（Vue 3 里更多用 v-model:xxx）。
  • v-bind 也有一些相关细节（例如 .prop 等），但面试通常不会深挖；答到 “事件类/输入类/键盘类” 基本够用。