匿名循环

要在 Vue 中循环 HTML 元素，可以使用 v-for 循环指令。当 Vue 渲染组件时，它将迭代您添加了指令的 HTML 元素，以便使用解析到指令中的数据。可以使用此指令执行匿名循环，您可以在其中定义数字 X，循环将迭代该指定的次数(计数从1开始，而数组索引从0开始)，这在您可以更严格地控制迭代次数或占位符内容的情况下非常方便。所有循环都需要迭代器 :key。当键或与键绑定的内容发生变化时，Vue 知道它需要在循环内重新加载内容。如果一个组件中有多个循环，请使用额外字符或上下文相关字符串随机化键，以避免 :key 重复冲突。

匿名循环如下所示；请注意，您可以使用引号或反引号 (`) 来描述字符串：

<div v-for="n in 2" :key="'loop-1-' + n">
    {{ n }}
</div>
<!-- Backticks -->
<div v-for="n in 5" :key="`loop-2-${n}`">
    {{ n }}
</div>

上述代码的输出应如下所示。

image 2023 10 11 16 10 53 184
Figure 1. Figure 1.25: Output of anonymous loops example

理解循环不仅是使用 Vue 的关键，也是使用 JavaScript 的关键。现在我们已经介绍了如何使用 v-for 语法处理循环以及绑定 :key 属性以向循环内容添加响应性的重要性，我们将在下一个练习中使用此函数。

练习 1.08：使用 v-for 循环字符串数组

在本练习中，我们将使用 Vue 的 v-for 指令执行匿名循环。对于那些以前在 JavaScript 中使用过 for 或 foreach 循环的人来说，这会很熟悉。

要访问本练习的代码文件，请参阅 https://packt.live/390SO1J 。

执行以下步骤来完成练习：

  1. 打开命令行终端，导航到 Exercise1.08 文件夹，然后按顺序运行以下命令：

    > cd Exercise1.08/
> code .
> yarn
> yarn serve

    转到 https://localhost:8080 。

  2. 通过向组件添加 <h1> 标题和带有 <li> 标记的 <ul> 元素，在 Exercise1-08.vue 中编写以下语法，该元素将具有 v-for 指令，其 n 值为 5 :

    <template>
  <div>
    <h1>Looping through arrays</h1>
    <ul>
      <li v-for="n in 5" :key="n">
        {{ n }}
      </li>
    </ul>

    这将生成如下输出：

    image 2023 10 11 16 24 40 299
    Figure 2. Figure 1.26: Iterating over arbitrary numbers will also allow you to output the index

  3. 现在让我们循环遍历一个字符串数组并用 n 来计算数组的迭代次数。在 data() 函数中准备一系列您个人感兴趣的内容。 通过在 interests 数组中查找 (item, n)，item 输出数组的字符串，n 是循环索引：

    <template>
    <div>
        <h1>Looping through arrays</h1>
        <ul>
            <li v-for="(item, n) in interests" :key="n">
                {{ item }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            interests: ['TV', 'Games', 'Sports'],
        }
    },
}
</script>

    运行上述代码后会生成以下输出：

    image 2023 10 11 16 28 57 137
    Figure 3. Figure 1.27: Iterating over an array of strings

    在本练习中，我们学习了如何迭代任意数字和特定的字符串数组，输出字符串值或数组的索引。我们还了解到，key 属性需要是唯一的，以避免 DOM 冲突并强制 DOM 正确地重新渲染组件。