Vue.js 条件渲染和列表渲染

news2025/1/13 19:37:57

Vue.js 条件渲染和列表渲染

今天我们来聊聊 Vue.js 的两个基础功能：条件渲染 和 列表渲染。这是写前端页面时必备的技能，掌握好它们，你就能轻松应对页面上的动态显示需求。

一、什么是条件渲染？

所谓条件渲染，就是根据某些条件决定是否显示某个内容。比如你想在页面上展示“登录”按钮，但用户已经登录了，就应该展示“退出”按钮。这就是一个典型的条件渲染场景。

在 Vue.js 中，我们用指令 v-if 和 v-else 来实现条件渲染。先看个简单例子：

<div id="app">
  <button v-if="isLoggedIn">退出</button>
  <button v-else>登录</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isLoggedIn: false
  }
});
</script>

解释一下：

当 isLoggedIn 是 true 时，页面只会显示“退出”按钮。
当 isLoggedIn 是 false 时，页面会显示“登录”按钮。

`v-if` 的另一个朋友：`v-else-if`

有时候我们不仅仅是两种情况，还需要多种条件。这时候可以用 v-else-if：

<div id="app">
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    score: 75
  }
});
</script>

解释一下：

如果 score 大于等于 90，显示“优秀”。
如果 score 大于等于 60 且小于 90，显示“及格”。
如果都不满足，就显示“不及格”。

二、`v-show`：一种高效的条件渲染

除了 v-if，Vue 还提供了 v-show。它的用法和 v-if 很像，但背后的实现有点不一样：

v-if 是真正的条件渲染，元素会被添加或移除到 DOM 中。
v-show 只是通过 display: none; 隐藏元素，DOM 结构始终保留。

什么时候用哪个？

如果你需要频繁切换元素的显示状态，推荐用 v-show，因为效率更高。
如果显示状态变化很少，比如页面加载时只显示一次，用 v-if 更合适。

来看个例子：

<div id="app">
  <p v-show="isVisible">这是一条提示信息</p>
  <button @click="toggle">切换显示</button>
</div>

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

点击按钮会切换文字的显示和隐藏。这里用 v-show 非常高效。

三、什么是列表渲染？

条件渲染搞定了单个元素的显示和隐藏，但如果是多个数据呢？这时候就要用到 列表渲染，也就是用 v-for 来循环渲染数据。

来看个例子：

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

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

解释一下：

v-for="item in items" 表示对 items 数组中的每个元素进行循环。
:key="item.id" 是必须的，它是每个元素的唯一标识，用于优化性能。
{{ item.name }} 会显示每个元素的名字。

最终页面上会渲染出一个带有苹果、香蕉、橙子的列表。

四、带索引的列表渲染

如果你还需要知道当前循环到了第几个元素，可以用 index：

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

这里的 index 是从 0 开始计数的，所以我们用 index + 1 来显示更符合直觉的序号。

五、条件渲染结合列表渲染

如果你想对列表中的每个元素再加个条件，比如只显示价格大于 10 的商品，可以这样写：

<ul>
  <li v-for="item in items" :key="item.id" v-if="item.price > 10">
    {{ item.name }} - {{ item.price }}元
  </li>
</ul>

但注意：Vue 不推荐在 v-for 内直接用 v-if，因为这样会导致性能问题。如果需要过滤数据，建议先用计算属性处理好：

<ul>
  <li v-for="item in filteredItems" :key="item.id">
    {{ item.name }} - {{ item.price }}元
  </li>
</ul>

<script>
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '苹果', price: 12 },
      { id: 2, name: '香蕉', price: 8 },
      { id: 3, name: '橙子', price: 15 }
    ]
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.price > 10);
    }
  }
});
</script>