V-for解構(gòu)的方法是什么

本篇內(nèi)容主要講解“V-for解構(gòu)的方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“V-for解構(gòu)的方法是什么”吧!

之所以起作用，是因為 Vue 將v-for的整個第一部分直接提升到函數(shù)的參數(shù)部分：

<li v-for="____ in array"> </li> function (____) {   //... }

然后，Vue 在內(nèi)部使用此函數(shù)來渲染列表。

這說明可以放在函數(shù)中括號中的任何有效Javascript也可以放在v-for中，如下所示：

<li v-for="{   // Set a default   radius = 20,    // Destructure nested objects   point: { x, y }, } in circles">

其他 v-for 技巧

眾所周知，可以通過使用如下元組從v-for中獲取索引：

當使用一個對象時，你也可以捕獲 key:

<li v-for="(value, key) in {   name: 'Lion King',   released: 2019,   director: 'Jon Favreau', }">   {{ key }}: {{ value }} </li>

還可以將這兩種方法結(jié)合使用，獲取屬性的鍵和索引:

<li v-for="(value, key, index) in {   name: 'Lion King',   released: 2019,   director: 'Jon Favreau', }">   #{{ index + 1 }}. {{ key }}: {{ value }} </li>

Vue 確實支持對 Map 和Set對象進行迭代，但是由于它們在 Vue 2.x 中不具有響應性，因此其用途非常有限。 我們還可以在此處使用任何  Iterable，包括生成器。

順便說一句，我有時使用Map或Set，但通常僅作為中間對象來進行計算。 例如，如果我需要在列表中查找所有唯一的字符串，則可以這樣做：

computed() {   uniqueItems() {     // 從數(shù)組創(chuàng)建一個Set，刪除所有重復項     const unique = new Set(this.items);      // 將該 Set 轉(zhuǎn)換回可用于 Vue 的數(shù)組     return Array.from(unique);   } }

字符串和 v-for

你知道嗎，還可以使用v-for遍歷字符串?

文檔中沒有這一點，我只是在通讀代碼以弄清楚v-for是如何實現(xiàn)的時候才發(fā)現(xiàn)了它:

<p v-for="character in 'Hello, World'">   {{ character }} </p>

上面會打印每個字符。

到此，相信大家對“V-for解構(gòu)的方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！