Vue - v-for 指令详解

发布时间:2023年12月29日

1. 渲染列表

首先,让我们看看如何使用 v-for 渲染一个简单的列表。在 Vue.js 中,我们可以使用 v-for 来遍历数组,并根据数组中的每个元素渲染相应的内容。

<template>
  <div>
    <!-- 使用 v-for 渲染列表 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.message }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, message: "A" },
        { id: 2, message: "B" }
      ]
    };
  }
};
</script>

<style scoped>
</style>

在上述例子中,通过 v-for="item in items" 遍历了 items 数组,并使用 :key="item.id" 来确保每个列表项都有一个唯一的标识符。这样做有助于 Vue.js 在处理列表变化时高效更新 DOM。

2. 带索引的列表

有时,我们可能需要在列表中显示每个元素的索引。Vue.js 提供了在 v-for 中获取索引的方法。

<template>
  <div>
    <!-- 使用 v-for 渲染带索引的列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index + 1 }}. {{ item.message }}
      </li>
    </ul>
  </div>
</template>

通过 (item, index),我们可以获取到每个元素的索引,并在列表中显示出来。

3. 遍历对象

除了数组,v-for 也可以用于遍历对象。在下面的例子中,我们使用 v-for 遍历了一个对象,并显示了对象的键值对。

<template>
  <div>
    <!-- 使用 v-for 遍历对象 -->
    <ul>
      <li v-for="(value, key) in myObject" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

通过 (value, key),我们可以获取到对象的值和键,并在列表中显示它们。

4. 渲染一段范围值

除了遍历数组和对象,v-for 还可以用于渲染一段范围值。在下面的例子中,我们使用 v-for 渲染了一个包含 1 到 10 的范围。

<template>
  <div>
    <!-- 使用 v-for 渲染一段范围值 -->
    <span v-for="n in 10" :key="n">{{ n }}</span>
  </div>
</template>

这样的用法使得我们可以在模板中生成一系列重复的元素。

5. 在 template 中包含多个元素

有时候,我们需要在 v-for 中包含多个元素。Vue.js 允许我们在 template 标签上使用 v-for,并在其中包含多个元素,而不需要额外的包裹元素。

<template>
  <div>
    <!-- 使用 v-for 在 template 中包含多个元素 -->
    <template v-for="item in items">
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </template>
  </div>
</template>

在上述例子中,v-for 遍历了 items 数组,并在 template 中包含了多个元素,这样可以更清晰地组织代码结构。

6. 使用 v-if 和 v-for 结合

在实际开发中,我们可能会需要根据某个条件过滤列表项的显示。在这种情况下,我们可以结合使用 v-ifv-for

<template>
  <div>
    <!-- 使用 v-if 和 v-for 结合 -->
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <template v-if="!todo.isComplete">
          {{ todo.name }}【?】
        </template>
        <template v-else>
          {{ todo.name }}【X】
        </template>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, name: "任务 1", isComplete: false },
        { id: 2, name: "任务 2", isComplete: true },
        { id: 3, name: "任务 3", isComplete: false }
      ]
    };
  }
};
</script>

<style scoped>
</style>

完整代码:

<template>
  <div>
    <!-- 使用 v-for 渲染列表 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.message }}
      </li>
    </ul>

    <!-- 使用 v-for 渲染带索引的列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index + 1 }}. {{ item.message }}
      </li>
    </ul>

    <!-- 使用 v-for 遍历对象 -->
    <ul>
      <li v-for="(value, key) in myObject" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>

    <!-- 使用 v-for 渲染一段范围值 -->
    <span v-for="n in 10" :key="n">{{ n }}</span>

    <!-- 使用 v-for 在 template 中包含多个元素 -->
    <template v-for="item in items">
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </template>

    <!-- 使用 v-if 和 v-for 结合 -->
    <!--    当使用v-if结合v-for时,Vue 在渲染时会优先处理v-if,然后再处理v-for。
      因此,当v-if条件不满足时,v-for就无法遍历数据并创建相应的元素,
      这可能导致 Vue 在处理v-for时找不到相应的数据而发出警告。-->
    <!--    <ul>-->
    <!--      <li v-for="todo in todos" v-if="todo && !todo.isComplete" :key="todo.id">-->
    <!--        {{ todo.name }}-->
    <!--      </li>-->
    <!--    </ul>-->
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <template v-if="!todo.isComplete">
          {{ todo.name }}【?】
        </template>
        <template v-else>
          {{ todo.name }}【X】
        </template>
      </li>
    </ul>


  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, message: "A" },
        { id: 2, message: "B" }
      ],
      myObject: {
        title: "How to do lists in Vue",
        author: "张三",
        publishedAt: "2023-12-28"
      },
      todos: [
        { id: 1, name: "任务 1", isComplete: false },
        { id: 2, name: "任务 2", isComplete: true },
        { id: 3, name: "任务 3", isComplete: false }
      ]
    };
  }
};
</script>

<style scoped>
</style>

在这里插入图片描述

在上述例子中,我们使用 v-if 来根据 todo.isComplete 的值来判断是否显示任务项。这样,我们可以灵活地根据条件来过滤和显示列表中的元素。当使用v-if结合v-for时,Vue 在渲染时会优先处理v-if,然后再处理v-for。因此,当v-if条件不满足时,v-for就无法遍历数据并创建相应的元素,这可能导致 Vue 在处理v-for时找不到相应的数据而发出警告。

文章来源:https://blog.csdn.net/qq_43116031/article/details/135279179
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。