這期內容當中小編將會給大家?guī)碛嘘P使用v-for循環(huán)的技巧有哪些，文章內容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯建站服務緊隨時代發(fā)展步伐，進行技術革新和技術進步，經過十載的發(fā)展和積累，已經匯集了一批資深網站策劃師、設計師、專業(yè)的網站實施團隊以及高素質售后服務人員，并且完全形成了一套成熟的業(yè)務流程，能夠完全依照客戶要求對網站進行成都網站設計、網站制作、建設、維護、更新和改版，實現客戶網站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯網化提供全面的解決方案。

在 Vue.js 中，v-for 循環(huán)是每個項目都會使用的東西，它允許您在模板代碼中編寫 for 循環(huán)。

在最基本的用法中，它們的用法如下。

<ul>
 <li v-for="product in products">
  {{ product.name }}
 </li>
</ul>

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

首先，我們將討論大多數 Vue 開發(fā)人員已經知道的常見很好做法——在 v-for 循環(huán)中使用 :key。通過設置一個惟一的鍵屬性，它可以確保組件以您期望的方式工作。

果我們不使用 key，Vue 將嘗試使 DOM 盡可能高效，這可能意味著 v-for 元素可能會出現亂序或其他不可預測的行為。如果我們對每個元素都有的鍵引用，那么我們就可以更好地準確地預測 DOM 將如何操作。

<ul>
 <li v-for="product in products" :key="product._id">
  {{ product.name }}
 </li>
</ul>

2.在一個范圍內循環(huán)

盡管大多數情況下，v-for 用于遍歷數組或對象，但在某些情況下，我們肯定只希望循環(huán)執(zhí)行一定次數。

例如，假設我們正在為在線商店創(chuàng)建一個分頁系統(tǒng)，而我們只希望每頁顯示 10 個產品。使用一個變量來跟蹤當前的頁碼，我們可以像這樣處理分頁。

<ul>
 <li v-for="index in 10" :key="index">
  {{ products[page * 10 + index] }}
 </li>
</ul>

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

一個超級常見的錯誤是使用 v-if 來過濾 v-for 循環(huán)的數據。盡管這看起來很直觀，但它會導致一個巨大的性能問題——VueJS 優(yōu)先考慮 v-for 而不是 v-if 指令。

這意味著您的組件將循環(huán)遍歷每個元素，然后檢查 v-if 條件以確定是否應渲染。因此，實際上，無論條件是什么，您都將遍歷數組的每個項目。

不要這樣：

// BAD CODE!
<ul>
 <li
  v-for="product in products"
  :key="product._id"
  v-if="product.price < 50"
 >
  {{ product.name }}
 </li>
</ul>

4.使用計算屬性或方法代替

為避免上述問題，我們應該在遍歷模板中的數據之前對其進行過濾。有兩種非常相似的方法：

使用計算屬性
使用過濾方法
讓我們快速地介紹一下這兩種方法。

首先，我們只需要設置一個計算屬性，為了獲得與之前的 v-if 相同的功能，代碼應如下所示。

<ul>
 <li
  v-for="products in productsUnderFifty"
  :key="product._id"
 >
  {{ product.name }}
 </li>
</ul>

// ...
<script>
 export default {
  data() {
   return {
    products: [],
   };
  },
  computed: {
   productsUnderFifty: function() {
    return this.products.filter(
     (product) => product.price < 50
    );
   },
  },
 };
</script>

下面的代碼幾乎相同，但是使用方法改變了我們訪問模板中的值的方式，如果我們希望能夠將變量傳遞給篩選器，那么方法是好的選擇。

<ul>
 <li
  v-for="products in productsUnderPrice(50)"
  :key="product._id"
 >
  {{ product.name }}
 </li>
</ul>

// ...

<script>
 export default {
  data() {
   return {
    products: [],
   };
  },
  methods: {
   productsUnderPrice(price) {
    return this.products.filter(
     (product) => product.price < price
    );
   },
  },
 };
</script>

5.在循環(huán)中訪問項目的索引

除了遍歷數組和訪問每個元素之外，我們還可以跟蹤每個項的索引。

為此，我們必須在項目后添加一個索引值，它非常簡單，可用于分頁，顯示列表索引，顯示排名等。

<ul>
 <li
  v-for="(products, index) in products"
  :key="product._id"
 >
  Product #{{ index }}: {{ product.name }}
 </li>
</ul>

6.遍歷一個對象

到目前為止，我們只真正看過使用 v-for 遍歷數組，但是我們可以輕松地遍歷對象的鍵值對。

與訪問元素的索引類似，我們必須向循環(huán)中添加另一個值。如果我們用一個參數遍歷一個對象，我們將遍歷所有的項。

如果我們添加另一個參數，我們將獲得 items 和 key，如果添加第三個，我們還可以訪問 v-for 循環(huán)的索引。

假設我們要遍歷產品中的每個媒體資源。

<ul>
 <li
  v-for="(products, index) in products"
  :key="product._id"
 >
  <span v-for="(item, key, index) in product" :key="key">
   {{ item }}
  </span>
 </li>
</ul>

上述就是小編為大家分享的使用v-for循環(huán)的技巧有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道。

網頁名稱：使用v-for循環(huán)的技巧有哪些-創(chuàng)新互聯
轉載來源：http://vcdvsql.cn/article6/djphog.html

成都網站建設公司_創(chuàng)新互聯，為您提供手機網站建設、App開發(fā)、標簽優(yōu)化、外貿網站建設、服務器托管、營銷型網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯