v-if#

• 语法：v-if="表达式"，表达式值为 true 就显示，false 就隐藏
• 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
• 场景：要么显示、要么不显示，不频繁切换的场景
• 其它：可以配合 v-else-if / v-else 进行链式调用条件判断

v-show#

• 语法：v-show="表达式"，表达式值为 true 就显示，false 就隐藏
• 原理：基于 CSS 样式 display 来控制显示与隐藏
• 场景：频繁切换显示隐藏的场景

注意（PPT 原文）：v-else-if 必须出现在 v-if 之后，可以出现多个；v-else 必须出现在 v-if / v-else-if 之后。

PPT 给的形式：

1
<span v-if="gender == 1">男生</span>
2
<span v-else-if="gender == 2">女生</span>
3
<span v-else>未知</span>

案例里的写法（一串 v-if / v-else-if 把数字翻译成职位，最后兜底”其他”）：

1
<td>
2
  <!-- v-if: 控制元素的显示与隐藏（条件成立才渲染这个 span） -->
3
  <span v-if="e.job == 1">班主任</span>
4
  <span v-else-if="e.job == 2">讲师</span>
5
  <span v-else-if="e.job == 3">学工主管</span>
6
  <span v-else-if="e.job == 4">教研主管</span>
7
  <span v-else-if="e.job == 5">咨询师</span>
8
  <span v-else>其他</span>
9
</td>

课程代码里还留了一段 v-show 的注释代码（同一个位置用 v-show 写一遍，作为对照）：

1
<!-- v-show: 控制元素的显示与隐藏（注意：条件不成立的 span 也还在 DOM 里，只是 display:none） -->
2
<td>
3
  <span v-show="e.job == 1">班主任</span>
4
  <span v-show="e.job == 2">讲师</span>
5
  <span v-show="e.job == 3">学工主管</span>
6
  <span v-show="e.job == 4">教研主管</span>
7
  <span v-show="e.job == 5">咨询师</span>
8
</td>

这两种写法看着都是”只显示一个”，但机制完全不同：

一、知识回顾（读完直接做下面的实践题）#

1. 指令是 HTML 标签上带 v- 前缀的特殊属性，写法 <p v-xxx="...">；常用指令：v-for（列表渲染）、v-bind（绑定属性值）、v-if / v-else-if / v-else（条件渲染）、v-show（按 display 显示隐藏）、v-model（表单双向绑定）、v-on（绑定事件）
2. v-for 语法：v-for="(item,index) in items" :key="item.id"——items 是要遍历的数组、item 是遍历出的元素、index 是索引（从 0 开始，可省略）；想让哪个标签循环展示多次，指令就加在哪个标签上
3. key 是给元素的唯一标识，便于 Vue 正确排序复用、提升渲染性能；推荐用数据的 id，不推荐用 index（index 会随位置变化、不对应）；遍历的数组必须在 data 中定义
4. v-bind：插值表达式不能出现在标签属性里，动态绑属性必须用 v-bind；语法 v-bind:属性名="属性值"，简写 :属性名="属性值"；绑定的数据必须在 data 中定义
5. v-if：v-if="表达式"，false 就不渲染该元素（创建 / 移除节点，条件渲染）；适合不频繁切换的场景；可配合 v-else-if（必须在 v-if 之后，可多个）、v-else（必须在最后）链式判断
6. v-show：v-show="表达式"，通过 CSS 的 display 属性控制显示与隐藏，元素一直在页面上；适合频繁切换的场景；只能单独用，没有配套的 v-show-else
7. v-model：在表单元素上创建双向数据绑定（数据变 → 输入框变；用户输入 → 数据自动变），可以方便地获取或设置表单项数据；语法 v-model="变量名"，变量必须在 data 中定义
8. v-on：为标签绑定事件，语法 v-on:事件名="方法名"，简写 @事件名="…"；方法写在 methods 里；methods 中的 this 指向 Vue 实例，可以用 this 拿到 data 中定义的数据
9. 案例里的职位翻译：job 的 1→班主任、2→讲师、3→学工主管、4→教研主管、5→咨询师、其它→其他，用一串 v-if / v-else-if / v-else 写在 <span> 上实现（用 v-show 也能显示，但机制不同）
10. 与原生 DOM 写法的差别：原生要写 render() / stripe() / bindDelete() 并手动重刷，Vue 只要在标签上”声明”（v-for、v-if、v-model、@click）；数据变了页面自动变，不用再手动操作 DOM

二、裸写题#

• 2-1 用循环渲染一个商品列表 页面上有一张”商品”表格（表头 3 列：序号、商品名、价格）。要求：

  1. 在数据里准备一个数组，放 4 个商品对象（字段：名称、价格，数据自己编）
  2. 表格的数据行一行都不要手写，让它按数组渲染出来——数据有几条就渲染几行（现在数组是空的，所以先一行都看不到）
  3. 序号列显示 1、2、3…（从 1 开始）
  4. 给每一行加一个唯一标识（用商品自己的某个字段）
  5. 往数组里再加一条数据，刷新页面应该自动多一行 （练习文件 test_20_列表渲染.html 里已经准备好了表头、空数组和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：一句”循环”指令加在要重复的那个标签上；序号要自己把索引加 1 二级 · 方法：v-for="(item, index) in 数组名" + :key；想循环 tr 就写在 tr 上；索引从 0 开始 三级 · 骨架：<tr v-____="(g, index) in ____" :key="g.____"> / <td>{{index ____ 1}}</td> / <td>{{g.name}}</td> / data() { return { goods: [ { id: 1, name: '____', price: ____ }, … ] } }

  参考答案（做完再点开）

  1
  <tbody>
  2
    <tr v-for="(g, index) in goods" :key="g.id">
  3
      <td>{{index + 1}}</td>
  4
      <td>{{g.name}}</td>
  5
      <td>{{g.price}}</td>
  6
    </tr>
  7
  </tbody>
  8
  
  9
  <script type="module">
  10
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  11
  
  12
    createApp({
  13
      data() {
  14
        return {
  15
          goods: [
  16
            { id: 1, name: '机械键盘', price: 399 },
  17
            { id: 2, name: '人体工学椅', price: 1299 },
  18
            { id: 3, name: '显示器支架', price: 199 },
  19
            { id: 4, name: '降噪耳机', price: 899 }
  20
          ]
  21
        }
  22
      }
  23
    }).mount('#app');
  24
  </script>

  显示更多显示更少

  检查点：① 页面出现 4 行，序号是 14（不是 03）；② 表头还在、没被循环掉（说明指令写在 tbody 里的 tr 上）；③ 数组里加一条刷新，页面多一行。

• 2-2 把头像和链接”绑”上数据 页面上有一张”用户卡片”：一个头像图片、一行姓名（可点击的链接）、一行说明文字。要求：

  1. 头像的图片地址、替代文字都来自数据
  2. 姓名的链接地址（href）也来自数据
  3. 说明文字前面加一个”小标签”，标签里的文字来自数据；当数据里的等级是 vip 时，标签显示”VIP 用户”，否则显示”普通用户”
  4. 先用 v-bind 的完整写法写一处，再用简写写一处，体会两者一样 （练习文件 test_20_绑定属性.html 里已经准备好了结构和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：凡是属性里要放数据，都不能用花括号，要用专门的绑定指令；“满足条件显示 A、否则显示 B”用条件指令配 v-else 二级 · 方法：v-bind:src="..." / 简写 :alt="..." / :href="..."；条件用 v-if="level == 'vip'" + v-else 三级 · 骨架：<img v-bind:____="user.image" :____="user.name"> / <a :____="user.homepage">{{user.name}}</a> / <span v-____="user.level == 'vip'">VIP 用户</span><span v-____>普通用户</span>

  参考答案（做完再点开）

  1
  <div id="app">
  2
    <!-- 完整写法：v-bind:src -->
  3
    <img v-bind:src="user.image" :alt="user.name" width="60">
  4
    <!-- 简写：冒号开头，效果和 v-bind: 完全一样 -->
  5
    <p><a :href="user.homepage">{{user.name}}</a></p>
  6
    <p>
  7
      <span v-if="user.level == 'vip'">VIP 用户</span>
  8
      <span v-else>普通用户</span>
  9
      —— {{user.intro}}
  10
    </p>
  11
  </div>
  12
  
  13
  <script type="module">
  14
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  15
  
  16
    createApp({
  17
      data() {
  18
        return {
  19
          user: {
  20
            name: '令狐冲',
  21
            image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg',
  22
            homepage: 'https://www.itcast.cn',
  23
            level: 'vip',
  24
            intro: '华山派大弟子'
  25
          }
  26
        }
  27
      }
  28
    }).mount('#app');
  29
  </script>

  显示更多显示更少

  检查点：① 头像是图片而不是破图或 {{user.image}} 这串字；② 鼠标移到姓名上是链接、地址是数据里的 homepage；③ 把 level 改成 'normal' 刷新，标签变成”普通用户”。 ⚠️ 注意 v-if 的值里写字符串要套引号：user.level == 'vip'（外层引号是属性的，内层用单引号）——写成 user.level == vip 会被当成变量名，报错。

• 2-3 做一排”条件显示”的状态标记 页面上有一排四个小方块（<span>），分别要根据数据决定显示哪一个（同时只能看到一个）。要求：

  1. 数据里有一个 status 变量，值自己设一个（0、1、2 或其它）
  2. status 为 0 时显示”未开始”、为 1 时显示”进行中”、为 2 时显示”已完成”、其它情况显示”状态未知”
  3. 再做一个”开关”：数据里一个 showDetail 变量（true / false），为 true 时显示一行详细说明，为 false 时这行说明要从页面上彻底消失（F12 里都找不到）
  4. 把要求 3 再实现一遍，但这次要求”不显示时元素还在，只是被样式藏起来”（F12 里能找到、带 display: none） （练习文件 test_20_条件渲染.html 里已经准备好了结构和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：多选一用”一串条件”；要求 3 和 4 的差别是两条不同指令的原理差别（一个删节点、一个改样式） 二级 · 方法：v-if / v-else-if / v-else（顺序不能乱）；要求 3 用 v-if，要求 4 用 v-show 三级 · 骨架：<span v-____="status == 0">未开始</span> / <span v-____-if="status == 1">进行中</span> / <span v-____-if="status == 2">已完成</span> / <span v-____>状态未知</span> / 要求 3：<p v-if="____">详细说明……</p> / 要求 4：<p v-show="____">详细说明……</p>

  参考答案（做完再点开）

  1
  <div id="app">
  2
    <p>
  3
      <span v-if="status == 0">未开始</span>
  4
      <span v-else-if="status == 1">进行中</span>
  5
      <span v-else-if="status == 2">已完成</span>
  6
      <span v-else>状态未知</span>
  7
    </p>
  8
  
  9
    <!-- 要求3：v-if —— false 时节点被移除，F12 里找不到 -->
  10
    <p v-if="showDetail">详细说明：这个任务由前端小组负责。</p>
  11
  
  12
    <!-- 要求4：v-show —— false 时节点还在，只是 style="display: none;" -->
  13
    <p v-show="showDetail">详细说明：这段文字用 v-show 控制。</p>
  14
  </div>
  15
  
  16
  <script type="module">
  17
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  18
  
  19
    createApp({
  20
      data() {
  21
        return {
  22
          status: 1,
  23
          showDetail: false
  24
        }
  25
      }
  26
    }).mount('#app');
  27
  </script>

  显示更多显示更少

  检查点：① status 改成 0/1/2/9 刷新，依次显示”未开始 / 进行中 / 已完成 / 状态未知”（只能看到一个）；② showDetail 保持 false 时，第一个 <p> 在 F12 的元素面板里搜不到，第二个 <p> 能搜到并且带 display: none；③ 把 showDetail 改成 true，两段说明都出来了。

• 2-4 搜索表单：采集输入 + 两个按钮 页面上有一个搜索表单（姓名输入框、类型下拉框、查询按钮、清空按钮）和一个”输出区”。要求：

  1. 输入框和下拉框里的值，都要能自动进到数据里（不用手写”取值”的代码）
  2. 点”查询”时，把当前的表单数据打印到控制台，同时把内容拼成一句话显示在输出区（比如”姓名: 张三, 类型: 2”）
  3. 点”清空”时，输入框、下拉框里的内容全部清空，输出区也清空 （练习文件 test_20_表单与事件.html 里已经准备好了表单和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：表单控件要”和一份数据绑成一体”；按钮要”点一下执行一个函数”；清空 = 把那份数据改回初始值 二级 · 方法：v-model="form.xxx"（绑的变量必须在 data 里）；@click="方法名"（方法写在 methods 里）；方法里用 this.form 读写；显示一句话用 {{ }} 绑一个字符串变量 三级 · 骨架：<input type="text" v-____="form.name"> / <select v-____="form.type"> / <button type="button" @____="search">查询</button> / <button type="button" @____="clear">清空</button> / methods: { search() { console.log(____.form); this.msg = \姓名: ${this.form.name}, 类型:${this.form.}`; }, clear() { this.form = { name: '', type: ” }; this.msg = ”; } }`

  参考答案（做完再点开）

  1
  <div id="app">
  2
    <input type="text" v-model="form.name" placeholder="请输入姓名">
  3
    <select v-model="form.type">
  4
      <option value=""></option>
  5
      <option value="1">前端</option>
  6
      <option value="2">后端</option>
  7
    </select>
  8
    <button type="button" @click="search">查询</button>
  9
    <button type="button" @click="clear">清空</button>
  10
    <p>{{msg}}</p>
  11
  </div>
  12
  
  13
  <script type="module">
  14
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  15
  
  16
    createApp({
  17
      data() {
  18
        return {
  19
          form: { name: '', type: '' },   // 采集表单数据
  20
          msg: ''                         // 输出区显示的文字
  21
        }
  22
      },
  23
      methods: {
  24
        search() {
  25
          console.log(this.form);         // 控制台里能看到用户此刻输入的内容
  26
          this.msg = `姓名: ${this.form.name}, 类型: ${this.form.type}`;
  27
        },
  28
        clear() {
  29
          this.form = { name: '', type: '' };  // 数据归零 → 输入框自动清空
  30
          this.msg = '';
  31
        }
  32
      }
  33
    }).mount('#app');
  34
  </script>

  显示更多显示更少

  检查点：① 在输入框里打字，控制台（点查询后）打印的 form 里就能看到刚打的字——没有一行”取 value”的代码；② 点”清空”后输入框、下拉框、输出区一起变空；③ 下拉框选”后端”时 type 打印出来是 2（v-model 绑的是 <option value="..."> 里的值）。

三、综合题#

• 3-1 用指令重写”员工列表”页面（课程案例） 照着课程案例 13. Vue-案例-员工列表(常用指令).html 做一遍：页面上有顶部导航栏、搜索表单（姓名、性别、职位 + 查询、清空）、员工表格（表头 8 列）、页脚。要求（按步骤来）：

  1. 准备数据：searchForm（name / gender / job 三个空串）+ empList（3 条员工数据，字段：id、name、image、gender(1/2)、job(“1”~“5”)、entrydate、updatetime）
  2. 渲染表格：数据行用循环渲染，key 用 id；序号列从 1 开始；性别列把 1/2 显示成”男/女”
  3. 头像列：图片地址和替代文字用属性绑定（图片地址失效时能看出区别：破图说明没绑，正常显示说明绑对了）
  4. 职位列：用条件渲染把 job 翻译成中文（1 班主任、2 讲师、3 学工主管、4 教研主管、5 咨询师、其它”其他”）
  5. 搜索表单：三个控件和 searchForm 双向绑定；“查询”按钮打印 this.searchForm；“清空”按钮把 searchForm 还原成三个空串
  6. 挂载点：把整个页面容器（id="container"）交给 Vue 管 （练习文件 test_20_综合_员工列表指令版.html 里已经准备好了导航栏、表单、表头、页脚和写作区，样式也一并给好了。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：先写”数据”（这一步决定后面所有渲染），再往表格和表单上贴指令；每条指令只负责一件事 二级 · 方法：v-for="(e, index) in empList" :key="e.id"；序号 {{index + 1}}；性别 {{e.gender == 1?'男' : '女'}}；头像 :src="e.image" :alt="e.name"；职位一串 v-if="e.job == 1" …；表单 v-model="searchForm.name"；按钮 @click="search" / @click="clear"；方法里 console.log(this.searchForm)、this.searchForm = {name:'', gender:'', job:''} 三级 · 骨架：<tr v-for="(____, index) in empList" :key="e.____"> / <td>{{e.gender == 1?____ : '女'}}</td> / <img class="avatar" :____="e.image" :alt="____"> / <span v-if="e.job == 1">班主任</span> … <span v-else>其他</span> / <input type="text" v-____="searchForm.name"> / methods: { search() { console.log(this.____); }, clear() { this.____ = {name:'', gender:'', job:''} } }

  参考答案（做完再点开）

  模板部分（贴指令的地方）：

  1
  <div id="container">
  2
    <!-- 搜索表单区域 -->
  3
    <form class="search-form">
  4
      <label for="name">姓名：</label>
  5
      <input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">
  6
  
  7
      <label for="gender">性别：</label>
  8
      <select id="gender" name="gender" v-model="searchForm.gender">
  9
        <option value=""></option>
  10
        <option value="1">男</option>
  11
        <option value="2">女</option>
  12
      </select>
  13
  
  14
      <label for="position">职位：</label>
  15
      <select id="position" name="position" v-model="searchForm.job">
  16
        <option value=""></option>
  17
        <option value="1">班主任</option>
  18
        <option value="2">讲师</option>
  19
        <option value="3">学工主管</option>
  20
        <option value="4">教研主管</option>
  21
        <option value="5">咨询师</option>
  22
      </select>
  23
  
  24
      <button type="button" v-on:click="search">查询</button>
  25
      <button type="button" @click="clear">清空</button>
  26
    </form>
  27
  
  28
    <!-- 表格展示区 -->
  29
    <table>
  30
      <thead>
  31
        <!-- 表头手写一次：序号、姓名、性别、头像、职位、入职日期、最后操作时间、操作 -->
  32
      </thead>
  33
      <tbody>
  34
        <tr v-for="(e, index) in empList" :key="e.id">
  35
          <td>{{index + 1}}</td>
  36
          <td>{{e.name}}</td>
  37
          <td>{{e.gender == 1?'男' : '女'}}</td>
  38
          <td><img class="avatar" :src="e.image" :alt="e.name"></td>
  39
          <td>
  40
            <span v-if="e.job == 1">班主任</span>
  41
            <span v-else-if="e.job == 2">讲师</span>
  42
            <span v-else-if="e.job == 3">学工主管</span>
  43
            <span v-else-if="e.job == 4">教研主管</span>
  44
            <span v-else-if="e.job == 5">咨询师</span>
  45
            <span v-else>其他</span>
  46
          </td>
  47
          <td>{{e.entrydate}}</td>
  48
          <td>{{e.updatetime}}</td>
  49
          <td class="action-buttons">
  50
            <button type="button">编辑</button>
  51
            <button type="button">删除</button>
  52
          </td>
  53
        </tr>
  54
      </tbody>
  55
    </table>
  56
  
  57
    <!-- 页脚版权区域…… -->
  58
  </div>

  显示更多显示更少

  脚本部分：

  1
  <script type="module">
  2
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  3
  
  4
    createApp({
  5
      data() {
  6
        return {
  7
          searchForm: { name: '', gender: '', job: '' },   // 采集搜索条件
  8
          empList: [                                       // 员工列表数据
  9
            { id: 1, name: '谢逊', image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg', gender: 1, job: '1', entrydate: '2023-06-09', updatetime: '2024-09-30T14:59:38' },
  10
            { id: 2, name: '韦一笑', image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg', gender: 1, job: '1', entrydate: '2020-05-09', updatetime: '2024-09-01T00:00:00' },
  11
            { id: 3, name: '黛绮丝', image: 'https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg', gender: 2, job: '2', entrydate: '2021-06-01', updatetime: '2024-09-01T00:00:00' }
  12
          ]
  13
        }
  14
      },
  15
      methods: {
  16
        search() {
  17
          console.log(this.searchForm);   // 把搜索条件打印出来
  18
        },
  19
        clear() {
  20
          this.searchForm = { name: '', gender: '', job: '' };  // 清空表单
  21
        }
  22
      }
  23
    }).mount('#container')
  24
  </script>

  显示更多显示更少

  检查点：① 表格 3 行、序号是 1~3、性别显示”男/男/女”、职位显示”班主任/班主任/讲师”；② 头像正常显示（不是破图）；③ 在姓名框里打字后点”查询”，控制台打印的对象里能看到刚输入的内容；④ 点”清空”，三个控件一起变空；⑤ F12 里 #container 内的花括号一个都看不到。 说明：课程页面的头像用的是阿里云图床链接（课程原链接现在访问返回 403 已失效，图会显示成破图，这不代表你写错了），想看得舒服就换成一张本地图片的地址。