Vue基础讲解：渲染 Vue 组件列表应用

今天分享一个简单的Vue基础知识点：渲染 Vue 组件列表应用。

此时我们已经有了一个完全可以工作的组件；我们现在准备ToDoItem向我们的应用程序添加多个组件。在本文中，我们将研究向组件添加一组待办事项数据App.vue，然后使用指令循环并在ToDoItem组件内部显示这些数据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 },
      ],
    };
  },
};

import uniqueId from "lodash.uniqueid";

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

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 },
      ],
    };
  },
};

现在，将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>

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

将属性更新label="My ToDo Item"为:label="item.label"，将:done="true"属性更新为: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>

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

有机会进行轻微重构

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

<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>