💚
Vue 指令速查
Vue 常用指令 v-if/v-for/v-model 等速查。
本地处理 · 不上传
加载工具中…
相关：vue · 指令 · v-model · 前端
Vue 指令速查列出 v-if、v-for、v-model 等内置指令的用法与修饰符。指令是 Vue 模板语法的核心。
使用步骤
- 按条件、循环、绑定、事件分类找指令
- 注意 v-if 与 v-show 的差别在于是否真正渲染
- v-for 必须配唯一的 key
- 自定义指令前先确认能否用组件解决
使用场景
- 查找指令的正确写法
- 理解各指令的行为差异
- 学习修饰符的用法
- 排查模板渲染问题
小贴士
- v-for 必须配 key，且不应用索引作为 key——列表顺序变化时会导致状态错位与不必要的重渲染。
- v-if 与 v-show 的区别是前者真正销毁重建元素，后者只切换 display。频繁切换用 v-show，条件很少变化用 v-if。
- 不要在同一元素上同时使用 v-if 和 v-for，两者的优先级在 Vue 2 与 Vue 3 中不同，容易产生意外行为。
常见问题
key 为什么不能用索引？
因为索引会随列表顺序变化而改变。在列表中间插入或删除元素时，后续项的索引全部变化，Vue 会误判为内容改变而非位置移动，导致组件状态错位、输入框内容串到别的行上。
v-if 和 v-show 怎么选？
频繁切换用 v-show（只改 CSS，切换成本低），很少切换或初始就不需要渲染的用 v-if（不渲染就没有开销）。含大量子组件的块用 v-if 能省下初始渲染成本。
能同时用 v-if 和 v-for 吗？
不建议。两者的优先级在 Vue 2 与 3 中相反，容易写出与预期不符的代码。正确做法是把 v-if 移到外层的 template 上，或先在计算属性中过滤数据。
Vue 指令速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用Vue 指令速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。