日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
很多人不知道 V-for 可以這樣解構

 最近發(fā)現(xiàn)我們可以使用v-for進行解構。

網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、成都小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了泰寧免費建站歡迎大家使用！

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.    
  
  
  
  3. function (____) { 
    4.   
  
  
  
  4.   //... 
    5.   
  
  
  
  5. } 
    6.

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

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

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2.   // Set a default 
    3.   
  
  
  
  3.   radius = 20, 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5.   // Destructure nested objects 
    6.   
  
  
  
  6.   point: { x, y }, 
    7.   
  
  
  
  7. } in circles"> 
    8.

其他 v-for 技巧

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

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

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2.   name: 'Lion King', 
    3.   
  
  
  
  3.   released: 2019, 
    4.   
  
  
  
  4.   director: 'Jon Favreau', 
    5.   
  
  
  
  5. }"> 
    6.   
  
  
  
  6.   {{ key }}: {{ value }} 
    7.   
  
  
  
  7.  

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

 
 
 
 
      
  
  
  
  1.   
  
  
  
  2.   name: 'Lion King', 
    3.   
  
  
  
  3.   released: 2019, 
    4.   
  
  
  
  4.   director: 'Jon Favreau', 
    5.   
  
  
  
  5. }"> 
    6.   
  
  
  
  6.   #{{ index + 1 }}. {{ key }}: {{ value }} 
    7.   
  
  
  
  7.  

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

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

 
 
 
 
      
  
  
  
  1. computed() { 
    2.   
  
  
  
  2.   uniqueItems() { 
    3.   
  
  
  
  3.     // 從數(shù)組創(chuàng)建一個Set，刪除所有重復項 
    4.   
  
  
  
  4.     const unique = new Set(this.items); 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     // 將該 Set 轉換回可用于 Vue 的數(shù)組 
    7.   
  
  
  
  7.     return Array.from(unique); 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

字符串和 v-for

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

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.   {{ character }} 
    3.   
  
  
  
  3.  
    4.

 上面會打印每個字符。

作者：Michael Thiessen 譯者：前端小智 來源：medium

原文：https://forum.vuejs.org/t/destructuring-rest-parameter/23332

本文轉載自微信公眾號「 大遷世界」，可以通過以下二維碼關注。轉載本文請聯(lián)系前端小智公眾號。


本文標題：很多人不知道 V-for 可以這樣解構
新聞來源：http://www.dlmjj.cn/article/dhdcsop.html