在 Vue 中循环项目的更好方法？答案

【问题标题】：Better way to loop over items in Vue?在 Vue 中循环项目的更好方法？
【发布时间】：2020-09-26 08:27:08
【问题描述】：

我是 Vue.JS 的初学者，最近遇到了这个问题。在循环访问data var 内的变量中的对象时，我必须向组件添加一个 span 类，然后将 v-for 放入其中，然后将我的所有 HTML 添加到其中。这就是我的意思

            data: {
                posts: [
                    { title : "My first post", author : "Seamus" },
                    { title : "Another post!", author : "Don" },
                    { title : "There are so many posts!", author : "Unknown" },
                ],
            }

如您所见，我有一个存储帖子的帖子列表。（请注意，我已经在 component[] 列表中注册了该组件。）所以这是 HTML

        Vue.component("blog-post", {
            props: ["posts"],
            template: `
            <div>
                <span v-for="post in posts">
                    <h1>{{ post.title }}</h1>
                    <p>{{ post.author }}</p>
                </span>
            </div>
            `
        })

我不得不放置一个包含其余元素的 span 元素。我想知道是否有更 Vue-onic 的方式来做到这一点。我知道我可能缺少一些信息，因为我只是新手，但是我想看看是否有更好的方法来做到这一点谢谢:)

【问题讨论】：

你的问题到底是什么？

标签： javascript html vue.js vue-component

【解决方案1】：

如果你不想使用html标签，你可以使用template。示例：

<template v-for="post in posts">
    <h1>{{ post.title }}</h1>
    <p>{{ post.author }}</p>
</template>

【讨论】：

【解决方案2】：

你这样做的方式很好。不过，最好为此使用列表元素，因为它们在语义上更正确。然后，将 :key 属性添加到列表项。请参阅示例链接：https://vuejs.org/v2/guide/list.html。如果包含 :key 属性，页面仍然可以工作，但它有助于正确重新呈现列表。

【讨论】：

【解决方案3】：

您可以将其添加到<div>

<div v-for="post in posts">
    <h1>{{ post.title }}</h1>
    <p>{{ post.author }}</p>
</div>

【讨论】：

您不能在模板的根元素上使用 v-for。