Vue渲染组件列表

使用 v-for 渲染列表

要成为有效的待办事项列表，我们需要能够呈现多个待办事项。为此，Vue 有一个特殊的指令，v-for. 这是一个内置的 Vue 指令，它允许我们在模板中包含一个循环，为数组中的每个项目重复呈现模板特征。我们将使用它来遍历一系列待办事项，并在我们的应用程序中以单独的ToDoItem组件显示它们。

添加一些数据来渲染

首先，我们需要获取一系列待办事项。为此，我们将向组件对象添加一个data属性，其中包含一个值是待办事项数组的字段。虽然我们最终会添加一种机制来添加新的待办事项，但我们可以从一些模拟待办事项开始。每个待办事项将由一个具有 a和一个属性的对象表示。App.vueToDoItemsnamedone

添加一些示例待办事项，如下所示。这样，您就有一些数据可用于使用v-for.

export default {
  name: 'app',
  components: {
    ToDoItem
  },
  data() {
    return {
      ToDoItems: [
        { label: 'Learn Vue', done: false },
        { label: 'Create a Vue project with the CLI', done: true },
        { label: 'Have fun', done: true },
        { label: 'Create a to-do list', done: false }
      ]
    };
  }
};

现在我们有了一个项目列表，我们可以使用v-for指令来显示它们。指令适用于与其他属性一样的元素。在 的情况下v-for，您使用类似于for...inJavaScript 中的循环的特殊语法 — —您要迭代的数组v-for="item in items"在哪里，并且是对数组中当前元素的引用。itemsitem

v-for附加到要重复的元素，并呈现该元素及其子元素。在这种情况下，我们希望为数组

中的每个待办事项显示一个元素ToDoItems。然后我们想将每个待办事项的数据传递给一个ToDoItem组件。

关键属性

在我们这样做之前，还有另一段语法需要了解，它与v-for属性key一起使用。为了帮助 Vue 优化渲染列表中的元素，它会尝试修补列表元素，以便不会在每次列表更改时重新创建它们。然而，Vue 需要帮助。为了确保它正确地重用列表元素，它需要在您附加v-for到的同一元素上具有唯一的“键”。

为了确保 Vue 可以准确地比较key属性，它们需要是字符串或数值。虽然使用名称字段会很好，但该字段最终将由用户输入控制，这意味着我们不能保证名称是唯一的。

1.lodash.uniqueid以与App组件相同的方式导入ToDoItem组件，使用

 import uniqueId from 'lodash.uniqueid';

2.接下来，为数组id中的每个元素添加一个字段ToDoItems，并为每个元素分配一个值uniqueId('todo-')。您的App.vue<script>元素内容现在应该如下所示：

import ToDoItem from './components/ToDoItem.vue';
import uniqueId from 'lodash.uniqueid'
export default {
  name: 'app',
  components: {
    ToDoItem
  },
  data() {
    return {
      ToDoItems: [
        { id: uniqueId('todo-'), label: 'Learn Vue', done: false },
        { id: uniqueId('todo-'), label: 'Create a Vue project with the CLI', done: true },
        { id: uniqueId('todo-'), label: 'Have fun', done: true },
        { id: uniqueId('todo-'), label: 'Create a to-do list', done: false }
      ]
    };
  }
};

3.现在，将v-for指令和key属性添加到模板中的<li>元素，如下所示：App.vue

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
    <to-do-item label="My ToDo Item" :done="true"></to-do-item>
  </li>
</ul>

当您进行此更改时，<li>标签之间的每个 JavaScript 表达式都可以访问该item值以及其他组件属性。这意味着我们可以将项目对象的字段传递给我们的ToDoItem组件——只要记住使用v-bind语法。这真的很有用，因为我们希望我们的待办事项将它们的label属性显示为它们的标签，而不是“我的待办事项”的静态标签。此外，我们希望它们的检查状态反映它们的done属性，而不是总是设置为done="false"。

4.label="My ToDo Item"将属性更新为:label="item.label"，并将:done="false"属性更新为:done="item.done"，如下面的上下文所示：

<ul>
  <li v-for="item in ToDoItems" :key="item.id">
     <to-do-item :label="item.label" :done="item.done"></to-do-item>
  </li>
</ul>

现在，当您查看正在运行的应用程序时，它会显示带有正确名称的待办事项，如果您检查源代码，您会看到输入都有唯一id的 s，取自App组件中的对象。

有机会进行轻微的重构

我们可以在这里做一点重构。我们可以将转化为道具，而不是为组件id内的复选框生成 。虽然这不是绝对必要的，但它使我们更容易管理，因为无论如何我们已经需要为每个待办事项创建一个唯一的。ToDoItemidid

ToDoItem为你的组件添加一个新的 prop — id.

使其成为必需，并将其类型设为String.

为防止名称冲突，请id从您的data属性中删除该字段。

您不再使用uniqueId，因此您需要删除该import uniqueId from 'lodash.uniqueid';行，否则您的应用会抛出错误。

<script>您的组件中的内容ToDoItem现在应该如下所示：

export default {
    props: {
        label: {required: true, type: String},
        done: {default: false, type: Boolean},
        id: {required: true, type: String}
    },
    data() {
        return {
           isDone : this.done,
        }
    },
}

现在，在您的App.vue组件中，item.id作为道具传递给ToDoItem组件。您的App.vue模板现在应该如下所示：

<template>
  <div id="app">
    <h1>My To-Do List</h1>
    <ul>
      <li v-for="item in ToDoItems" :key="item.id">
        <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item>
      </li>
    </ul>
  </div>
</template>

当您查看渲染的站点时，它应该看起来相同，但是我们的重构现在意味着我们id正在从内部数据中获取App.vue并ToDoItem作为道具传递，就像其他所有内容一样，因此现在事情变得更加合乎逻辑和一致。大家如果对此比较感性趣，想了解更多知识，可以来关注一下赢咖4的Java视频教程，里面有更丰富的知识等着大家去学习，希望对大家能够有所帮助。