v-if 条件渲染指令

最后更新：2026-10-22

v-if 按表达式的真假值决定是否渲染这段元素：条件为假时元素被真正销毁并从 DOM 中移除，条件变真时重新创建。

📝 语法

<div v-if="条件">...</div>
<div v-else-if="另一个条件">...</div>
<div v-else>...</div>

expression	任意返回真假值的表达式（模板中直接写，无需 {{{{ }}}}）

返回值：指令，无返回值

修改下面的代码，在预览区实时查看效果：

输出：

页面显示「现在你看到我了」；点击按钮后该段从 DOM 中移除，按钮文字不变。

💡 提示 切换开销高（销毁/重建 DOM）：频繁切换显示隐藏用 v-show 更划算。

⚠️ 注意 不要和 v-for 写在同一元素上：v-if 优先级更高，拿不到循环变量，应改用嵌套 template。

ℹ️ 说明 v-else / v-else-if 必须紧跟 v-if 元素，中间不能插入其他内容。

更多案例即将上线。

Q v-if 和 v-show 有什么区别？

A v-if 真正销毁/重建元素（惰性渲染，初始条件为假时什么都不渲染）；v-show 始终渲染元素，只是切换 CSS display。

Q 为什么条件为假时用开发者工具找不到元素？

A 这正是 v-if 的行为：元素被移出 DOM 并销毁，不是隐藏。

Q v-if 可以配合 v-for 使用吗？

A 不建议同级使用。把 v-if 放到外层 <template> 上，v-for 留在内层元素上。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。