最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

Vue 中的 v-for 循環(huán)允許你在模板代碼中編寫 for 循環(huán)，尤其是當(dāng)我們做下面的操作時(shí)非常有用：

成都創(chuàng)新互聯(lián)為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)， 我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。

• 渲染數(shù)組或列表
• 遍歷對(duì)象屬性

在最基本的用法中，v-for 循環(huán)是這樣使用的：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

不過(guò)它還有一些你不知道的用法，可以使你的 v-for 代碼更加精確、和高效。

1. 始終在 v-for 循環(huán)中使用 key

首先要討論的很多人都已經(jīng)知道的一種用法：在 v-for 循環(huán)中使用 key。通過(guò)設(shè)置唯一的 key 屬性，可以確保你的組件按期望的方式工作。

如果我們不使用 key，vue 將會(huì)使 DOM 盡可能的高效。這可能意味著 v-for 元素可能出現(xiàn)亂序或其他不可預(yù)測(cè)的行為。

如果我們對(duì)每個(gè)元素都有一個(gè)唯一的鍵引用，那可以更好地預(yù)測(cè) DOM 將會(huì)如何被操縱。

 
 
 
 

  
  
  
  
 
  
  
  
  
  
  
  
  
  
    v-for='product in products' 
  
  
  
  
    :key='product._id'   
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

2. 用 v-for 在一個(gè)范圍內(nèi)進(jìn)行循環(huán)

雖然大多數(shù)情況下 v-for 用于遍歷數(shù)組或?qū)ο螅隙ù嬖谖覀兛赡苤幌氲囟ù螖?shù)的情況。

假設(shè)我們要網(wǎng)店創(chuàng)建一個(gè)分頁(yè)系統(tǒng)，并且想在每頁(yè)只顯示 10 個(gè)商品品。通過(guò)使用變量來(lái)跟蹤我們當(dāng)前的頁(yè)碼，可以像這樣處理分頁(yè)：

 
 
 
 

  
  
  
  
looping over a range
 
  
  
  
  
   
  
  
  
  
    {{ products[page * 10 + index] }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

3. 避免在循環(huán)中使用 v-if

在 v-for 循環(huán)中錯(cuò)誤地使用 v-if 來(lái)過(guò)濾數(shù)據(jù)[1] 是非常常見(jiàn)的。

雖然這樣做看起來(lái)很直觀，但它會(huì)導(dǎo)致一個(gè)巨大的性能問(wèn)題—— vue 的 v-for 優(yōu)先于 v-if 指令 [2]。

這意味著你的組件會(huì)遍歷每一個(gè)元素，然后檢查 v-if 條件查看它是否應(yīng)該被渲染。

如果把 v-if 與 v-for 放在一起使用，無(wú)論你的條件是什么，都會(huì)將遍歷數(shù)組的每一個(gè)元素。

 
 
 
 

  
  
  
  
// 不好的代碼 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
    v-for='product in products'  
  
  
  
  
    :key='product._id'  
  
  
  
  
    v-if='product.onSale' 
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

上面的代碼會(huì)引發(fā)什么題呢?

假如我們的商品數(shù)組中有幾千個(gè)項(xiàng)目，但是只有 3 個(gè)處于銷售狀態(tài)產(chǎn)品需要渲染。那么每次重新渲染時(shí)，即使銷售的 3 種產(chǎn)品根本沒(méi)有變化，vue 也必須遍歷幾千個(gè)項(xiàng)目。所以應(yīng)該盡量避免這種情況。

接下來(lái)是兩種替代方案，而不是把 v-for 與 v-if 放在一起用。

4. 改用計(jì)算屬性或方法

為了避免上述問(wèn)題，應(yīng)該在我們的模板中迭代之前先過(guò)濾這些數(shù)據(jù)。有兩種非常相似的方法可以做到：

• 使用計(jì)算屬性
• 使用過(guò)濾方法

至于用哪種方法你自己說(shuō)了算。下面對(duì)兩者進(jìn)行簡(jiǎn)單的介紹。

首先需要設(shè)置一個(gè)計(jì)算屬性。為了打到與之前使用 v-if 相同的效果，代碼應(yīng)該是這樣：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
// ... 
  
  
  
  
 
 
 
 
 

這樣做有幾個(gè)好處：

• 數(shù)據(jù)屬性只會(huì)在依賴項(xiàng)發(fā)生變化時(shí)才會(huì)被重新評(píng)估
• 模板只會(huì)遍歷在售商品，而不是每一個(gè)項(xiàng)目

第二種方法的代碼幾乎和前面一樣：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
// ... 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

5. 把循環(huán)放到包裝元素中

有時(shí)候你可能想把 v-for 與 v-if 結(jié)合起來(lái)使用，用來(lái)確定是否需要渲染一個(gè)列表。

假如我們只想在用戶登錄時(shí)渲染商品列表該怎么辦。

 
 
 
 

  
  
  
  
// 不好的代碼 
  
  
  
  
 
  
  
  
  
  
  
  
  
  
    v-for='product in products'  
  
  
  
  
    :key='product._id'  
  
  
  
  
    v-if='isLoggedIn'  
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

上面的代碼會(huì)有什么問(wèn)題?

和前面一樣， vue 模板會(huì)優(yōu)先考慮 v-for ，所以它會(huì)遍歷每個(gè)元素并檢查 v-if。

即使最終什么都不渲染，也會(huì)遍歷幾千個(gè)元素!

比較簡(jiǎn)單的解決方案是給代碼的 v-if 語(yǔ)句換個(gè)位置。

 
 
 
 

  
  
  
  
// 這樣比較好 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    v-for='product in products'  
  
  
  
  
    :key='product._id'  
  
  
  
  
  > 
  
  
  
  
    {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

這要好很多，因?yàn)槿绻?isLoggedIn 為 false 的話根本不需要進(jìn)行迭代。

6. 在循環(huán)中訪問(wèn)索引

除了遍歷數(shù)組并訪問(wèn)每個(gè)元素之外，還可以跟蹤每個(gè)項(xiàng)目的索引。

為了達(dá)到這個(gè)目的，必須在我們的項(xiàng)目之后添加一個(gè)索引值。這非常簡(jiǎn)單，對(duì)于分頁(yè)、顯示列表索引、顯示排名等操作都很有用。

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
    Product #{{ index }}: {{ product.name }} 
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

7. 迭代對(duì)象

到目前為止，我們只真正研究了用 v-for 遍歷數(shù)組。但是我們可以很容易地迭代對(duì)象的鍵值對(duì)。

與訪問(wèn)元素的索引類似，我們必須向循環(huán)中添加另一個(gè)值。如果用單個(gè)參數(shù)循環(huán)對(duì)象的話將會(huì)循環(huán)所有項(xiàng)目。

如果我們?cè)偬砑右粋€(gè)參數(shù)，將會(huì)得到 item 和 key。如果添加第三個(gè)還可以訪問(wèn) v-for循環(huán)的 index。

假設(shè)要遍歷商品的每個(gè)屬性，代碼應(yīng)該是這樣：

 
 
 
 

  
  
  
  
 
  
  
  
  
   
  
  
  
  
     
  
  
  
  
      {{ item }} 
  
  
  
  
     
  
  
  
  
  
 
  
  
  
  
 
 
 
 
 

網(wǎng)頁(yè)題目：用好Vue中v-for循環(huán)的7種方法
URL分享：http://fisionsoft.com.cn/article/djhsihe.html