如何在 Vue 中使用 v-for

Posted on by

通常，当我们创建应用程序时，我们使用的数据决定了我们向用户展示的内容。例如，在一个待办事项应用程序中，我们可能有多个待办事项列表项。v-for在 Vue 中，通过我们的 Vue 模板中的属性可以很容易地显示多个数据点。

如何在 Vue 中使用 v-for#

假设我们有一些数据存储在单个页面组件上。我们的.vue文档看起来有点像这样：

<template>
    <div id="locations">

    </div>
</template>
<script>
export default {
    data() {
        return {
            locations: [
                { name: 'London', date: '11/02/2022', numberOfPeople: 4, complete: true },
                { name: 'Paris', date: '12/01/2022', numberOfPeople: 2, complete: true },
                { name: 'Tokyo', date: '04/06/2021', numberOfPeople: 6, complete: true },
                { name: 'Mumbai', date: '08/10/2021', numberOfPeople: 10, complete: true },
                { name: 'New York', date: '12/12/2022', numberOfPeople: 14, complete: true },
                { name: 'Dubai', date: '10/02/2023', numberOfPeople: 12, complete: false },
                { name: 'Shanghai', date: '04/02/2020', numberOfPeople: 2, complete: true }
            ]
        }
    }
}
</script>

我们的目的是在我们的模板中显示我们所有的“位置”数据。我们在这里使用静态数据——但v-for它是响应式的，就像所有 Vue.js 一样。因此，如果 API 更新了这些数据，它将传递给我们的模板。

在这个例子中，使用v-for是不费吹灰之力的。我们所要做的就是更新或<template>标记以循环遍历每个项目。让我们看看我们将如何做到这一点：

<template>
    <div id="locations">
        <div class="location-item" v-for="(item, index) in locations" :key="index">
            <p>We travelled to  on  with  people.</p>
        </div>
    </div>
</template>

更新我们的代码后，我们应该有如下所示的内容：

所以现在我们所有的数据都可以很容易地以段落的形式显示。我们的.location-itemdiv 完全包含v-for循环的逻辑：

<div class="location-item" v-for="(n, i) in locations" :key="i">

当我们说 时(item, index) in locations，item 指的是我们循环中的一个项目——所以我们可以调用item.name从我们的数据集中获取伦敦或孟买。index指的是该元素的索引。

您可能还注意到我们写了:key="index". 每个v-for循环项目都需要一个键。对于这个例子，我们使用索引作为我们的键。如果你忽略它——你会在 Vue.js 中得到一个错误。

如何在 Vue 中同时使用 v-if 和 v-for#

在 Vue 中，我们不能将v-forandv-if一起使用，因为它们经常发生冲突。在上面的数据中，我们有一个名为 的字段completed，如果旅程结束，则为 true，如果尚未发生，则为 false。如果我们只想显示已完成的旅程，我们需要将我们添加v-if到子 HTML 元素中。如果我们用 将它添加到元素中v-for，它将不起作用！

因此，我们可以通过将模板更改为如下所示来隐藏任何已完成为假的元素：

<template>
    <div id="locations">
        <div class="location-item" v-for="(item, index) in locations" :key="index">
            <p v-if="item.completed === true">We travelled to  on  with  people.</p>
        </div>
    </div>
</template>

Vue 中的嵌套 v-for 循环#

值得一提的是，嵌套v-for循环是可能的，并且遵循我们在本文中介绍的相同模式。这是一组嵌套v-for循环的示例，我们在其中循环遍历国家列表及其状态：

<template>
    <div id="countries">
        <div class="country-item" v-for="(item, index) in countries" :key="index">
            <h2> States:</h2>
            <p v-for="(state, i) in item.states" :key="i">state.name</p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            countries: [
                { 
                    name: "UK", 
                    states: [{
                        name: "London",
                        lowerCaseName: "london"
                    },
                    {
                        name: "Scotland",
                        lowerCaseName: "scotland"
                    }]
                    // More...
                },
                {
                    name: "India",
                    states: [{
                        name: "Madhya Pradesh",
                        lowerCaseName: "madhya-pradesh"
                    }]
                    // More...
                }
            ]
        }
    }
}
</script>

结论#

这就是 forv-for循环。我们看过：

  • 如何在data().
  • 如何使用嵌套的 v-for 循环。
  • 结合 v-for 和 v-if。

一旦你开始使用 Vue 就非常有趣。你可以在这里找到更多的 Vue 内容。

推荐阅读：