本文系统讲解 Vue 3 中 v-if 指令的核心用法，重点解析如何基于数组中对象的布尔属性（如 item.overnight）进行精准条件渲染，并纠正“v-if="{{...}}"”等典型语法错误，帮助开发者写出健壮、可维护的模板逻辑。
本文系统讲解 vue 3 中 `v-if` 指令的核心用法，重点解析如何基于数组中对象的布尔属性（如 `item.overnight`）进行精准条件渲染，并纠正“`v-if="{{...}}"`”等典型语法错误，帮助开发者写出健壮、可维护的模板逻辑。
在 Vue 3 模板中，v-if 是最基础也最关键的条件渲染指令之一。它根据绑定表达式的真值（truthy）或假值（falsy） 决定是否将对应元素渲染到 DOM 中——当表达式为 false、null、undefined、0 或空字符串时，该元素及其子组件将被完全销毁并从 DOM 移除；反之则重新创建并挂载。这与仅切换 display: none 的 v-show 有本质区别：v-if 具备真正的条件“存在性”控制能力，适用于权限判断、状态分支、空数据占位等场景。
✅ 正确语法：直接绑定 JavaScript 表达式，无需插值语法
v-if 的值是一个纯 JavaScript 表达式上下文，Vue 会自动求值并转换为布尔值。因此，绝不可使用双大括号 {{ }} 插值语法——这是初学者最常见的错误：
<!-- ❌ 错误：v-if 不接受插值语法，会导致解析失败或运行时警告 -->
<p v-if="{{ item.overnight }}">+1</p>
<!-- ✅ 正确：直接写表达式，Vue 自动求值 -->
<p v-if="item.overnight" class="nextDay">+1</p>在你的示例中，flightOptionData 数组每个对象都包含 overnight: true/false 字段，只需将 v-if="item.overnight" 直接写入标签即可实现动态显示：
<template>
<v-expansion-panel
v-for="item in flightOptionData"
:key="item.type"
elevation="0"
class="rounded-lg foExpansion"
>
<v-expansion-panel-title class="pa-3 bg-card" v-slot="{ open }">
<section class="foCard">
<p>{{ item.finalPrice }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<p>{{ item.number }}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11111" title="python-flask-vue-creator"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="python-flask-vue-creator" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11111" title="python-flask-vue-creator">python-flask-vue-creator</a>
<p>创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。</p>
</div>
<a href="/xiazai/skill11111" title="python-flask-vue-creator" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<!-- ✅ 正确绑定布尔属性 -->
<p v-if="item.overnight" class="nextDay">+1</p>
</section>
</v-expansion-panel-title>
</v-expansion-panel>
</template>
<script setup>
import { ref } from 'vue'
const flightOptionData = ref([
{ type: 'economy', finalPrice: '5.431,00', number: 'A12314', overnight: true },
{ type: 'business', finalPrice: '5.431,00', number: 'A12314', overnight: false }
])
</script>? 提示：在
<script setup></script>语法下，推荐使用ref/reactive声明响应式数据，而非 Options API 的data()函数（已逐步被官方推荐的 Composition API 取代）。
⚠️ 注意事项与最佳实践
避免
v-if与v-for同级使用：Vue 官方明确不推荐将v-if和v-for放在同一元素上（如<div v-if="..." v-for="...">），因为 <code>v-for优先级更高，可能导致意外行为。应改用计算属性预过滤数据：const overnightOptions = computed(() => flightOptionData.value.filter(item => item.overnight) )
然后在模板中遍历
overnightOptions，逻辑更清晰、性能更可控。确保
key的唯一性与稳定性：v-for中的:key应基于每项的稳定唯一标识（如item.id或item.type），而非索引index，否则在列表增删时可能引发状态错乱（如表单输入内容错位）。-
复杂条件？直接写表达式或提取为计算属性：
若判断逻辑较重（如v-if="item.status === 'active' && !item.archived && user.hasPermission"），建议封装为计算属性或方法，提升可读性与复用性：const shouldShowNextDay = (item) => item.overnight && item.finalPrice > 1000
-
与
v-show的选型原则：- 用
v-if：条件极少变化（如用户登录态、页面初始化权限校验）； - 用
v-show：高频切换（如 Tab 栏、折叠面板），避免重复挂载开销。
- 用
掌握 v-if 的本质——它是 Vue 响应式系统与虚拟 DOM 协同工作的入口之一，正确使用不仅能保障功能正确性，更是构建高性能、可测试 Vue 应用的基石。
