使用 v-for 渲染列表

要成為有效的待辦事項列表，我們需要能夠呈現(xiàn)多個待辦事項。為此，Vue 有一個特殊的指令，v-for. 這是一個內(nèi)置的 Vue 指令，它允許我們在模板中包含一個循環(huán)，為數(shù)組中的每個項目重復(fù)呈現(xiàn)模板特征。我們將使用它來遍歷一系列待辦事項，并在我們的應(yīng)用程序中以單獨的ToDoItem組件顯示它們。

添加一些數(shù)據(jù)來渲染

首先，我們需要獲取一系列待辦事項。為此，我們將向組件對象添加一個data屬性，其中包含一個值是待辦事項數(shù)組的字段。雖然我們最終會添加一種機制來添加新的待辦事項，但我們可以從一些模擬待辦事項開始。每個待辦事項將由一個具有 a和一個屬性的對象表示。App.vueToDoItemsnamedone

添加一些示例待辦事項，如下所示。這樣，您就有一些數(shù)據(jù)可用于使用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 }
      ]
    };
  }
};

現(xiàn)在我們有了一個項目列表，我們可以使用v-for指令來顯示它們。指令適用于與其他屬性一樣的元素。在 的情況下v-for，您使用類似于for...inJavaScript 中的循環(huán)的特殊語法 — —您要迭代的數(shù)組v-for="item in items"在哪里，并且是對數(shù)組中當(dāng)前元素的引用。itemsitem

v-for附加到要重復(fù)的元素，并呈現(xiàn)該元素及其子元素。在這種情況下，我們希望為數(shù)組

中的每個待辦事項顯示一個元素ToDoItems。然后我們想將每個待辦事項的數(shù)據(jù)傳遞給一個ToDoItem組件。

關(guān)鍵屬性

在我們這樣做之前，還有另一段語法需要了解，它與v-for屬性key一起使用。為了幫助 Vue 優(yōu)化渲染列表中的元素，它會嘗試修補列表元素，以便不會在每次列表更改時重新創(chuàng)建它們。然而，Vue 需要幫助。為了確保它正確地重用列表元素，它需要在您附加v-for到的同一元素上具有唯一的“鍵”。

為了確保 Vue 可以準(zhǔn)確地比較key屬性，它們需要是字符串或數(shù)值。雖然使用名稱字段會很好，但該字段最終將由用戶輸入控制，這意味著我們不能保證名稱是唯一的。

1.lodash.uniqueid以與App組件相同的方式導(dǎo)入ToDoItem組件，使用

 import uniqueId from 'lodash.uniqueid';

2.接下來，為數(shù)組id中的每個元素添加一個字段ToDoItems，并為每個元素分配一個值uniqueId('todo-')。您的App.vue<script>元素內(nèi)容現(xiàn)在應(yīng)該如下所示：

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.現(xiàn)在，將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>

當(dāng)您進(jìn)行此更改時，<li>標(biāo)簽之間的每個 JavaScript 表達(dá)式都可以訪問該item值以及其他組件屬性。這意味著我們可以將項目對象的字段傳遞給我們的ToDoItem組件——只要記住使用v-bind語法。這真的很有用，因為我們希望我們的待辦事項將它們的label屬性顯示為它們的標(biāo)簽，而不是“我的待辦事項”的靜態(tài)標(biāo)簽。此外，我們希望它們的檢查狀態(tài)反映它們的done屬性，而不是總是設(shè)置為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>

現(xiàn)在，當(dāng)您查看正在運行的應(yīng)用程序時，它會顯示帶有正確名稱的待辦事項，如果您檢查源代碼，您會看到輸入都有唯一id的 s，取自App組件中的對象。

有機會進(jìn)行輕微的重構(gòu)

我們可以在這里做一點重構(gòu)。我們可以將轉(zhuǎn)化為道具，而不是為組件id內(nèi)的復(fù)選框生成 。雖然這不是絕對必要的，但它使我們更容易管理，因為無論如何我們已經(jīng)需要為每個待辦事項創(chuàng)建一個唯一的。ToDoItemidid

ToDoItem為你的組件添加一個新的 prop — id.

使其成為必需，并將其類型設(shè)為String.

為防止名稱沖突，請id從您的data屬性中刪除該字段。

您不再使用uniqueId，因此您需要刪除該import uniqueId from 'lodash.uniqueid';行，否則您的應(yīng)用會拋出錯誤。

<script>您的組件中的內(nèi)容ToDoItem現(xiàn)在應(yīng)該如下所示：

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

現(xiàn)在，在您的App.vue組件中，item.id作為道具傳遞給ToDoItem組件。您的App.vue模板現(xiàn)在應(yīng)該如下所示：

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

當(dāng)您查看渲染的站點時，它應(yīng)該看起來相同，但是我們的重構(gòu)現(xiàn)在意味著我們id正在從內(nèi)部數(shù)據(jù)中獲取App.vue并ToDoItem作為道具傳遞，就像其他所有內(nèi)容一樣，因此現(xiàn)在事情變得更加合乎邏輯和一致。大家如果對此比較感性趣，想了解更多知識，可以來關(guān)注一下動力節(jié)點的Java視頻教程，里面有更豐富的知識等著大家去學(xué)習(xí)，希望對大家能夠有所幫助。