编辑“︁Vue.js条件渲染”︁（章节）

= Vue.js条件渲染 =

'''Vue.js条件渲染'''是Vue.js框架中用于根据条件动态显示或隐藏DOM元素的核心功能。它通过指令（如<code>v-if</code>、<code>v-else</code>、<code>v-else-if</code>和<code>v-show</code>）实现，允许开发者基于JavaScript表达式的真假值控制元素的渲染状态。

== 介绍 ==
在Web开发中，经常需要根据用户交互、数据状态或其他条件动态调整界面内容。Vue.js提供了多种方式实现条件渲染：
* '''<code>v-if</code>'''：完全创建或销毁元素
* '''<code>v-show</code>'''：通过CSS的<code>display</code>属性切换可见性
* '''<code>v-else</code>'''/<code>v-else-if</code>：提供条件分支逻辑

这些指令使开发者能够声明式地描述UI应该如何响应状态变化，而无需手动操作DOM。

== 基本用法 ==

=== v-if指令 ===
<code>v-if</code>是最基础的条件渲染指令，它会根据表达式的真假值决定是否渲染元素：

<syntaxhighlight lang="html">
<div id="app">
  <p v-if="seen">现在你看到我了</p>
</div>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</syntaxhighlight>

'''输出结果'''：当<code>seen</code>为<code>true</code>时，段落会显示；设为<code>false</code>时，段落会从DOM中完全移除。

=== v-else和v-else-if ===
可以创建条件分支链：

<syntaxhighlight lang="html">
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else>
  不是A也不是B
</div>
</syntaxhighlight>

== v-show指令 ==
<code>v-show</code>与<code>v-if</code>不同，它始终渲染元素，只是通过CSS切换显示状态：

<syntaxhighlight lang="html">
<h1 v-show="ok">你好!</h1>
</syntaxhighlight>

'''关键区别'''：
* <code>v-if</code>有更高的切换开销（创建/销毁组件）
* <code>v-show</code>有更高的初始渲染开销（无论条件如何都会渲染）
* 频繁切换时使用<code>v-show</code>，运行时条件很少改变时使用<code>v-if</code>

== 性能考虑 ==
Vue的条件渲染系统采用高效的虚拟DOM算法，但开发者仍需注意：

1. '''避免同时使用<code>v-if</code>和<code>v-for</code>'''：<br>
   当它们处于同一节点时，<code>v-for</code>比<code>v-if</code>具有更高优先级。

2. '''合理选择指令'''：<br>
   频繁切换（如选项卡）→ <code>v-show</code><br>
   初始条件决定是否渲染 → <code>v-if</code>

== 实际应用案例 ==

=== 登录状态切换 ===
典型用户界面根据登录状态显示不同内容：

<syntaxhighlight lang="html">
<div id="user-panel">
  <div v-if="isLoggedIn">
    <p>欢迎，{{ userName }}!</p>
    <button @click="logout">登出</button>
  </div>
  <div v-else>
    <button @click="login">登录</button>
    <button @click="register">注册</button>
  </div>
</div>
</syntaxhighlight>

=== 表单验证反馈 ===
显示表单验证错误信息：

<syntaxhighlight lang="html">
<div class="form-group">
  <input v-model="email" type="email">
  <p class="error-message" v-if="!isEmailValid">
    请输入有效的电子邮件地址
  </p>
</div>
</syntaxhighlight>

== 高级用法 ==

=== 在<template>元素上使用v-if ===
需要条件渲染多个元素时，可以使用<code><template></code>作为不可见的包装元素：

<syntaxhighlight lang="html">
<template v-if="showDetails">
  <h3>详细信息</h3>
  <p>{{ details }}</p>
  <img :src="detailImage">
</template>
</syntaxhighlight>

=== 条件渲染与组件 ===
条件渲染特别适用于组件：

<syntaxhighlight lang="html">
<component-a v-if="currentComponent === 'A'"></component-a>
<component-b v-else-if="currentComponent === 'B'"></component-b>
<component-c v-else></component-c>
</syntaxhighlight>

== 可视化流程 ==
以下是条件渲染的决策流程：

<mermaid>
graph TD
    A[开始] --> B{条件}
    B -->|true| C[渲染元素]
    B -->|false| D[v-if: 不渲染<br>v-show: 隐藏]
    C --> E[结束]
    D --> E
</mermaid>

== 数学表达 ==
在某些复杂条件下，可能需要数学表达式。例如，根据分数显示评级：

<math>
\text{rating} = \begin{cases}
A & \text{如果 } score \geq 90 \\
B & \text{如果 } 80 \leq score < 90 \\
C & \text{其他情况}
\end{cases}
</math>

对应Vue实现：
<syntaxhighlight lang="html">
<div v-if="score >= 90">A</div>
<div v-else-if="score >= 80">B</div>
<div v-else>C</div>
</syntaxhighlight>

== 总结 ==
Vue.js的条件渲染提供了灵活的方式来控制界面元素的显示。关键要点：
* 使用<code>v-if</code>/<code>v-else</code>/<code>v-else-if</code>实现条件分支
* 使用<code>v-show</code>进行简单的显示/隐藏切换
* 考虑性能影响选择适当的指令
* 可以组合使用这些指令创建复杂的条件界面

通过合理运用这些技术，开发者可以构建出动态响应数据变化的用户界面。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js基础]]