v-if 控制元素是否渲染，条件为假时元素不进入DOM；支持布尔值、逻辑判断、methods或计算属性；v-else-if和v-else须紧邻使用；多元素用template包裹；避免与v-for同用，应外移v-if或预过滤数据。
v-if 不是控制“显隐”，而是控制“渲染与否”——条件为假时，元素根本不会出现在 DOM 中；这点和 v-show 有本质区别。
v-if 的基本写法
直接在元素上添加 v-if="表达式"，表达式返回 true 才渲染该元素：
- 表达式可以是 data 中的布尔值，比如
v-if="isLoggedIn" - 也可以是简单逻辑判断，比如
v-if="user.role === 'admin'" - 支持访问 methods 返回值或计算属性，如
v-if="hasPermission('edit')"
v-else 和 v-else-if 的配合用法
它们必须紧跟在 v-if 或前一个 v-else-if 后面，中间不能插入其他元素或空格：
<p v-if="status === 'loading">加载中...</p><p v-else-if="status === 'error">请求失败</p><p v-else>数据已就绪</p>
注意：v-else 后面不带任何表达式，它只兜底所有前面条件都不成立的情况。
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
对多个元素做条件控制
不用给每个元素都加 v-if，用 包裹更简洁：
<template v-if="showDetails"></template><h2>详情标题</h2><p>这是一段详细描述</p>
template 标签本身不会被渲染，只起逻辑分组作用，适合批量控制。
v-if 和 v-for 尽量不要一起用
官方明确不推荐在同一元素上同时使用这两个指令，因为 v-for 优先级更高，容易导致意外行为或警告：
- ❌ 错误写法：
<li v-if="item.visible" v-for="item in list">{{ item.name }}</li> - ✅ 正确做法：把 v-if 移到外层容器，或用计算属性预过滤数据
- 例如：
<ul v-if="list.length"><li v-for="item in list">...</li></ul>
