Vue2 入门指南07：Vue 的条件渲染与列表渲染

在前端开发中，动态展示和管理数据是核心功能之一。Vue 提供了强大的条件渲染和列表渲染功能，可以轻松控制 DOM 的显示与数据渲染。本篇将深入讲解 Vue2 中的条件渲染和列表渲染的使用方法。

---

一、条件渲染

条件渲染指根据表达式的值动态显示或隐藏 DOM 元素。

1. 使用 v-if 指令

v-if 用于条件性地渲染某个 DOM 元素。

<div id="app">
  <p v-if="isVisible">这是一个条件渲染的段落。</p>
  <button @click="toggle">切换显示状态</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      isVisible: true
    },
    methods: {
      toggle() {
        this.isVisible = !this.isVisible;
      }
    }
  });
</script>

运行效果：

• 点击按钮，可以切换段落的显示和隐藏。

2. 使用 v-else 和 v-else-if

v-else 和 v-else-if 用于扩展条件分支逻辑。

<div id="app">
  <p v-if="status === 'success'">操作成功！</p>
  <p v-else-if="status === 'error'">操作失败！</p>
  <p v-else>未知状态。</p>
  <button @click="changeStatus">切换状态</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      status: 'success'
    },
    methods: {
      changeStatus() {
        const statuses = ['success', 'error', 'unknown'];
        this.status = statuses[Math.floor(Math.random() * statuses.length)];
      }
    }
  });
</script>

运行效果：

• 根据 status 的值展示对应的提示信息。

3. 使用 v-show

v-show 通过修改元素的 display 样式控制显示或隐藏，与 v-if 不同，v-show 不会从 DOM 中移除元素。

<div id="app">
  <p v-show="isVisible">这个段落使用 v-show。</p>
  <button @click="toggle">切换显示状态</button>
</div>

区别：

• v-if：真正移除和销毁 DOM 元素，适合频繁变化的场景。
• v-show：只改变样式，适合需要频繁切换显示状态的场景。

---

二、列表渲染

列表渲染用于动态生成多个 DOM 元素，通常基于数组或对象的数据源。

1. 使用 v-for 渲染数组

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: ['苹果', '香蕉', '橙子']
    }
  });
</script>

运行效果：

• 根据数组生成对应的列表项。

2. 使用 v-for 渲染对象

<div id="app">
  <ul>
    <li v-for="(value, key) in user" :key="key">
      {{ key }}: {{ value }}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      user: {
        name: '张三',
        age: 25,
        city: '上海'
      }
    }
  });
</script>

运行效果：

• 遍历对象的键值对生成列表。

3. 嵌套 v-for

当数据结构是嵌套数组或对象时，可以使用嵌套的 v-for。

<div id="app">
  <ul>
    <li v-for="(group, groupIndex) in groups" :key="groupIndex">
      <p>分组 {{ groupIndex + 1 }}:</p>
      <ul>
        <li v-for="(item, index) in group" :key="index">
          {{ item }}
        </li>
      </ul>
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      groups: [
        ['苹果', '香蕉'],
        ['橙子', '葡萄']
      ]
    }
  });
</script>

---

三、条件渲染与列表渲染的结合

示例：根据条件动态显示列表

<div id="app">
  <input v-model="filter" placeholder="输入关键字">
  <ul>
    <li v-for="item in filteredItems" :key="item">
      {{ item }}
    </li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      filter: '',
      items: ['苹果', '香蕉', '橙子', '葡萄']
    },
    computed: {
      filteredItems() {
        return this.items.filter(item => item.includes(this.filter));
      }
    }
  });
</script>

运行效果：

• 根据输入框的值动态过滤列表内容。

---

四、优化建议

1. 为 v-for 添加唯一的 key
   使用唯一的 key 可以帮助 Vue 更高效地更新 DOM。
2. 避免不必要的渲染
   当数据量较大时，可以结合 v-if 或懒加载机制减少性能消耗。
3. 结合计算属性
   利用计算属性对列表进行处理（如排序、过滤），避免在模板中直接操作。

---

五、小结

• 条件渲染 (v-if / v-show) 是控制 DOM 显示的基础工具，根据场景选择合适的指令。
• 列表渲染 (v-for) 是处理动态数据的核心手段，适用于数组和对象的渲染。
• 条件渲染和列表渲染可以结合使用，为应用提供灵活的展示逻辑。