vue2技能树（5）-条件渲染和列表渲染

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

Vue 2 条件渲染详解

条件渲染是Vue.js 2中一个重要的概念，它允许你根据特定的条件来决定是否渲染或显示某个DOM元素。这是构建动态和交互性用户界面的关键部分。以下是对Vue 2条件渲染的多方面详细介绍，包括使用详细的项目实例。

v-if 和 v-else 指令

v-if 和 v-else 指令是用于条件渲染的核心指令。它们允许你根据给定的条件来显示或隐藏元素。

项目示例

假设你有一个简单的任务清单应用，你希望根据是否存在任务来显示不同的提示信息。你可以使用v-if 和 v-else 来实现这一目标。

<div id="app">
  <h1>任务清单h1>
  <div v-if="tasks.length > 0">
    <h2>任务列表：h2>
    <ul>
      <li v-for="task in tasks">{{ task }}li>
    ul>
  div>
  <div v-else>
    <p>暂无任务。p>
  div>
div>
1
2
3
4
5
6
7
8
9
10
11
12

new Vue({
  el: '#app',
  data: {
    tasks: ['任务1', '任务2', '任务3'],
  },
});
1
2
3
4
5
6

在这个示例中，根据tasks 数组是否为空，你可以决定是否渲染任务列表或者显示“暂无任务”的提示。

v-show 指令

v-show 指令类似于v-if，但它不是真正的条件渲染，而是使用CSS的display属性来隐藏或显示元素。如果你需要频繁切换元素的可见性，v-show可能更适合。

项目示例

继续上面的任务清单应用示例，你可以使用v-show 来切换任务列表的可见性。

<div v-show="tasks.length > 0">
  <h2>任务列表：h2>
  <ul>
    <li v-for="task in tasks">{{ task }}li>
  ul>
div>
1
2
3
4
5
6

在这个示例中，当tasks 数组不为空时，任务列表会显示；当tasks 数组为空时，任务列表会被隐藏，但DOM元素仍然存在。

v-if 和 v-show 的区别

• v-if：在条件为假时，元素不会存在于DOM中，因此它对性能有较好的优化。但频繁切换时可能会有一些性能开销。
• v-show：元素始终存在于DOM中，只是使用CSS的display属性来控制可见性。这在频繁切换时可能更快，但可能会有轻微的性能开销。

你可以根据你的需求和性能优化考虑选择使用v-if还是v-show。

v-if 和 v-else-if 指令

除了v-if 和 v-else，Vue 2还提供了v-else-if 用于多条件渲染。这在你有多个条件要满足时非常有用。

项目示例

假设你的任务清单应用有三个状态：进行中、已完成和已取消。你可以使用v-else-if 来渲染不同状态的任务。

<div v-if="status === 'inProgress'">
  <h2>进行中的任务：h2>
  <ul>
    <li v-for="task in inProgressTasks">{{ task }}li>
  ul>
div>
<div v-else-if="status === 'completed'">
  <h2>已完成的任务：h2>
  <ul>
    <li v-for="task in completedTasks">{{ task }}li>
  ul>
div>
<div v-else>
  <h2>已取消的任务：h2>
  <ul>
    <li v-for="task in canceledTasks">{{ task }}li>
  ul>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这个示例中，根据status 的值，你可以决定渲染不同状态的任务列表。

条件渲染是Vue 2的强大功能，它使你可以根据数据的变化来控制元素的显示和隐藏，以实现动态和交互性的用户界面。

Vue 2 列表渲染详解

列表渲染是Vue.js 2中一个强大的功能，它允许你轻松地渲染数据列表到DOM中。Vue提供了多种指令和方法来实现列表渲染，包括v-for指令、计算属性和方法。以下是对Vue 2列表渲染的多方面详细介绍，包括使用详细的项目实例。

v-for 指令

v-for 指令是Vue中用于循环渲染元素的核心指令。它允许你在模板中基于数据数组或对象的每个项来重复渲染元素。

项目示例

假设你有一个任务清单应用，你可以使用v-for 来渲染任务列表。

<div id="app">
  <h1>任务清单h1>
  <ul>
    <li v-for="task in tasks">{{ task }}li>
  ul>
div>
1
2
3
4
5
6

new Vue({
  el: '#app',
  data: {
    tasks: ['任务1', '任务2', '任务3'],
  },
});
1
2
3
4
5
6

在这个示例中，v-for 指令循环遍历tasks 数组中的每个任务，并将它们渲染成列表项。

计算属性和方法

除了v-for，你还可以使用计算属性和方法来进行列表渲染。这对于复杂的列表操作非常有用。

项目示例

假设你有一个包含任务的数组，并希望渲染已完成的任务的数量。

<div id="app">
  <h1>任务清单h1>
  <ul>
    <li v-for="task in completedTasks">{{ task }}li>
  ul>
  <p>已完成任务数：{{ completedTaskCount }}p>
div>
1
2
3
4
5
6
7

new Vue({
  el: '#app',
  data: {
    tasks: [
      { text: '任务1', completed: true },
      { text: '任务2', completed: false },
      { text: '任务3', completed: true },
    ],
  },
  computed: {
    completedTasks: function() {
      return this.tasks.filter(task => task.completed);
    },
    completedTaskCount: function() {
      return this.completedTasks.length;
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这个示例中，completedTasks 计算属性用于过滤已完成的任务，并将它们渲染成列表项。completedTaskCount 计算属性用于计算已完成任务的数量。

v-bind:key

在使用v-for 进行列表渲染时，你应该为每个渲染的元素提供一个唯一的key 属性。这有助于Vue更有效地管理DOM元素。

项目示例

<div id="app">
  <ul>
    <li v-for="task in tasks" v-bind:key="task.id">{{ task.text }}li>
  ul>
div>
1
2
3
4
5

在这个示例中，v-bind:key 用于为每个任务列表项提供一个唯一的标识，通常使用任务的ID。

使用对象的v-for

除了数组，你还可以使用对象进行v-for 进行列表渲染。

项目示例

假设你有一个包含任务的对象，每个任务都有一个唯一的键。

<div id="app">
  <ul>
    <li v-for="(task, key) in tasks" v-bind:key="key">{{ task }}li>
  ul>
div>
1
2
3
4
5

new Vue({
  el: '#app',
  data: {
    tasks: {
      task1: '任务1',
      task2: '任务2',
      task3: '任务3',
    },
  },
});
1
2
3
4
5
6
7
8
9
10

在这个示例中，v-for 用于遍历任务对象，key 作为任务的唯一标识。

v-for 的索引

除了元素值，v-for 还可以提供索引值。

项目示例

<div id="app">
  <ul>
    <li v-for="(task, index) in tasks" v-bind:key="index">{{ task }}li>
  ul>
div>
1
2
3
4
5

在这个示例中，index 是任务在数组中的索引值。

列表渲染是Vue 2的一个强大特性，它使你可以轻松地渲染数据列表，无论是使用v-for指令、计算属性还是方法，都提供了多种方式来满足不同的需求。这使得Vue成为一个出色的前端框架，用于构建动态和交互性的用户界面。