Vue基础教程（44）内置指令之v-if/v-else-if/v-else：Vue的“人生抉择器”：v-if/v-else-if/v-else，让你的网页像德芙一样丝滑！

原创于 2025-09-28 08:02:26 发布 · 294 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

嘿，伙计们！今天我们来唠一唠Vue里那几个天天见，但你可能未必真正“懂”它的老朋友——v-if，v-else-if 和 v-else。它们仨啊，说白了就是Vue给你的“人生抉择器”，帮你控制网页上的元素是“抛头露面”还是“隐居山林”。

别以为它们就只是个简单的if-else，里面的门道可深了！用好了，你的应用流畅得就像德芙巧克力；用砸了，小心性能卡成PPT。坐稳了，老司机要发车了！

一、初识天团：v-if，一个“有原则”的指令

想象一下，v-if就像一个非常讲原则的保安。

<div>
  <h1 v-if="isVIP">尊贵的VIP会员，您好！</h1>
  <p>这里是所有人都能看到的内容。</p>
</div>

在这个例子里，isVIP就是你手里的“通行证”。如果isVIP的值是true，保安v-if就会大手一挥：“老板，里面请！”，这个<h1>标签就会被实实在在地创建出来，插入到DOM中。但如果isVIP是false，那对不起，保安会毫不留情地说：“闲人免进！”，然后这个<h1>标签根本就不会被创建，就像从来没存在过一样。

划重点：v-if 是“真正的条件渲染”，它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

这有啥好处呢？对于那种初始化开销很大，或者里面有很多复杂逻辑的组件（比如一个巨大的图表、一个视频播放器），用v-if在它不需要的时候彻底销毁掉，可以节省很多宝贵的资源。这叫“眼不见为净”，节能环保！

二、冤家路窄：v-if 和 v-show 的“世纪之争”

说到v-if，就不得不提它的老冤家——v-show。很多新手会搞混它俩，但其实它们有本质的区别。

v-if：是“拆房子/盖房子”。条件为假，直接把房子（DOM元素）给拆了；条件为真，再重新盖起来。动静大，但彻底。
v-show：是“拉窗帘”。不管条件真假，房子（DOM元素）一直都在那儿。条件为假，只是给房子拉上个style="display: none;"的窗帘，让你看不见而已。动静小，但房子占着的“地皮”（内存）还在。

所以，到底该选谁？记住这个黄金法则：

需要频繁切换 visibility（显示/隐藏）的场景，用 v-show。比如一个弹窗的打开关闭，一个标签页的切换。因为频繁地销毁和重建DOM成本很高，用v-show只控制CSS，性能好得多。
运行时条件很少改变，或者条件为假时根本不需要它存在的场景，用 v-if。比如根据用户权限决定是否渲染某个管理功能模块。既然平时根本用不到，何必一直让它占着内存呢？

简单不？下次别再选错啦！

三、天团合体：v-else-if 和 v-else 的完美接力

人生不是非黑即白，网页也一样。有时候我们不止两种状态，这时候v-if就需要它的好兄弟来帮忙了。

v-else：顾名思义，“否则的话…”。它必须紧跟着一个v-if或者v-else-if元素，自己没有任何表达式。它就像个跟屁虫，前面大哥的条件不满足，它就自动上场。
v-else-if： 2.1.0版本新增的“中场球员”，用来连接多个条件。它也必须紧跟着v-if或v-else-if。

来看一个超有趣的例子，模拟一个“智商检测器”（纯属娱乐，切勿当真）：

<template>
  <div>
    <input type="number" v-model="score" placeholder="请输入你的智商分数">
    <p v-if="score >= 150">哇塞！你是天才！请收下我的膝盖！</p>
    <v-else-if="score >= 120">厉害啦！聪明人说的就是你！</v-else-if>
    <v-else-if="score >= 90">嗯，很正常，是个地球人。</v-else-if>
    <v-else>朋友，你是不是对分数有什么误解？</v-else>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: ''
    }
  }
}
</script>

使用要点：

兄弟情深：它们必须像连体婴一样紧紧相邻，中间不能插个<div>之类的第三者，否则Vue就懵了，不认识它们了。
接力赛规则： Vue会从前到后依次判断条件，一旦某个v-if或v-else-if的条件为true，后面的v-else-if和v-else就都会被跳过。就像接力赛，一棒跑赢了，后面的棒次就不用跑了。

四、实战进阶：玩出花的组合技

光会单个指令不算啥，真正的Vue高手都懂得组合使用。

场景：一个完整的用户登录状态展示

<template>
  <div>
    <!-- 根据不同的状态，展示完全不同区域的内容 -->
    <div v-if="userLoading">
      <p>🔄 正在拼命加载中...</p>
    </div>
    <div v-else-if="!isLoggedIn">
      <h2>您好，请登录</h2>
      <button @click="login">点击登录</button>
    </div>
    <div v-else>
      <h2>欢迎回来，{{ userName }}！</h2>
      <div v-if="userRole === 'admin'">
        <button>进入管理后台</button>
        <button>查看所有数据</button>
      </div>
      <div v-else-if="userRole === 'editor'">
        <button>发布新文章</button>
      </div>
      <div v-else>
        <p>您是普通用户，可以浏览内容。</p>
      </div>
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userLoading: true,
      isLoggedIn: false,
      userName: '',
      userRole: '' // 'admin', 'editor', 'user'
    }
  },
  mounted() {
    // 模拟异步获取用户信息
    setTimeout(() => {
      this.userLoading = false;
      // 假设登录成功了
      this.isLoggedIn = true;
      this.userName = '程序员老哥';
      this.userRole = 'admin';
    }, 1500);
  },
  methods: {
    login() {
      // 登录逻辑
      this.isLoggedIn = true;
      this.userName = '新用户';
      this.userRole = 'user';
    },
    logout() {
      // 退出逻辑
      this.isLoggedIn = false;
      this.userName = '';
      this.userRole = '';
    }
  }
}
</script>

这个例子完美展示了如何层层嵌套使用：

首先，用最大的v-if/v-else-if/v-else判断加载状态和登录状态。
在用户已登录的区块内，又用一套新的v-if/v-else-if/v-else根据用户角色来渲染不同的功能按钮。

这种结构清晰、逻辑分明，维护起来也特别方便。

五、避坑指南与性能考量

避免同一元素使用 v-if 和 v-for
这是个经典的坑。当你把它们用在同一个元素上时，Vue会优先处理v-for，这意味着它会先循环出所有元素，再一个个去判断v-if。如果是为了过滤列表，效率会非常低。
错误示范：

<li v-for="user in users" v-if="user.isActive">{{ user.name }}</li>

正确做法：使用计算属性（computed）先过滤好数据。

<li v-for="user in activeUsers">{{ user.name }}</li>

computed: {
  activeUsers() {
    return this.users.filter(user => user.isActive);
  }
}

用 key 管理可复用的元素
Vue为了高效，会尽可能地复用已有元素。比如你在<input>之间切换，如果只是v-if/v-else切换，输入框的内容不会被清空，因为它被复用了。如果你不希望这样，可以给每个input加一个唯一的key属性，这样Vue就会认为是两个独立的元素，切换时会重新渲染。

<template v-if="loginType === 'username'">
  <label>用户名：</label>
  <input key="username-input" placeholder="请输入用户名">
</template>
<template v-else>
  <label>邮箱：</label>
  <input key="email-input" placeholder="请输入邮箱">
</template>