不建议将 v-if 和 v-for 同时写在同一个标签上，因优先级不一致易引发逻辑错误或性能问题；应将条件判断移至循环内部、用 template 外层控制列表整体渲染、复杂条件用计算属性预处理、高频显隐切换可用 v-show。
不建议把 v-if 和 v-for 写在同一个标签上。Vue 官方明确反对这种写法，因为优先级在不同版本中不一致，容易导致逻辑错误或性能浪费。
把条件判断移到循环内部
当你要根据每个列表项的状态单独决定是否显示、显示什么内容时，直接在 v-for 的子元素里用 v-if 或 v-else-if：
- ✅ 正确示例：
<li v-for="item in list" :key="item.id"><br> <span v-if="item.status === 'active'">✅ {{ item.name }}</span><br> <span v-else-if="item.status === 'pending'">⏳ {{ item.name }}</span><br> <span v-else>❌ {{ item.name }}</span><br></li> - 这样每个
item都独立走自己的条件分支，语义清晰，不会影响其他项 - 注意：不要省略
:key，且推荐用唯一字段（如item.id），不用index
用 template 包裹做整组控制
如果想控制“整个列表是否渲染”（比如空数组时不显示任何 <ul></ul>），就把 v-if 放在外层 <template></template> 上：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- ✅ 正确示例：
<template v-if="list.length > 0"><br> <ul><br> <li v-for="item in list" :key="item.id">{{ item.name }}</li><br> </ul><br></template><br><div v-else>暂无数据</div> - 这样既避免了在
<li>上混用指令，又实现了“有数据才渲染列表结构”的意图
复杂条件优先用计算属性过滤
如果条件逻辑较重（比如多字段组合、含函数调用、需复用），别在模板里硬写，而是提前在 JS 层处理好数据：
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐做法：
const filteredList = computed(() =><br> list.filter(item =><br> item.status === 'active' &&<br> item.score > 60 &&<br> item.tags.includes('vip')<br> )<br>); - 模板中只写：
<li v-for="item in filteredList" :key="item.id">{{ item.name }}</li> - 好处：逻辑可测试、可复用、模板更干净，也避免重复计算
v-show 替代 v-if 的适用场景
如果只是频繁切换显隐（比如折叠/展开某类列表项），且 DOM 结构不变，v-show 比 v-if 更轻量：
- ✅ 示例：
<li v-for="item in list" :key="item.id" v-show="item.isVisible">{{ item.name }}</li> -
v-show只切display: none，不销毁重建，适合高频开关 - 但注意：它始终会渲染 DOM，初始加载时若数据量大，会影响首屏性能
