Vue指令之v-for的使用說明

2022-04-08 13:00:16

Vue v-for的使用

1.迭代普通陣列

在data中定義普通陣列

data:{
      list:[1,2,3,4,5,6]
}

在html中使用 v-for 指令渲染

<p v-for="(item,i) in list">--索引值--{{i}}   --每一項--{{item}}</p>

2.迭代物件陣列

在data中定義物件陣列

data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ]
}

在html中使用 v-for 指令渲染

<p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>

3.迭代物件

在data中定義物件

data:{
      user:{
        id:1,
        name:'託尼.賈',
        gender:'男'
      }
}

在html中使用 v-for 指令渲染

<p v-for="(val,key) in user">--鍵是--{{key}}--值是--{{val}}</p>

4.迭代數位

<!-- 注意：如果使用v-for迭代數位的話，前面 count 的值從 1 開始-->
<p v-for="count in 10">這是第{{count}}次迴圈</p>

完整程式碼：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id='app'>
    <!--v-for迴圈普通陣列-->
    <p v-for="(item,i) in list">--索引值--{{i}}   --每一項--{{item}}</p>
    <br/>
    <!--v-for迴圈物件陣列-->
    <p v-for="(user,i) in listObj">--id--{{user.id}}   --姓名--{{user.name}}</p>
    <br/>
    <!--注意，在遍歷物件的鍵值對的時候，除了有 val 和 key,在第三個位置還有一個索引-->
    <p v-for="(val,key) in user">--鍵是--{{key}}  --值是--{{val}}</p>
    <br/>
    <!-- in 後面我們放過陣列、物件陣列、物件，還可以放數位-->
    <!-- 注意：如果使用v-for迭代數位的話，前面 count 的值從 1 開始-->
    <p v-for="count in 10">這是第{{count}}次迴圈</p>
  </div>
</body>
<script src="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:'#app',
    data:{
      list:[1,2,3,4,5,6],
      listObj:[
        {id:1, name:'zs1'},
        {id:2, name:'zs2'},
        {id:3, name:'zs3'},
        {id:4, name:'zs4'},
        {id:5, name:'zs5'},
        {id:6, name:'zs6'},
      ],
      user:{
        id:1,
        name:'託尼.賈',
        gender:'男'
      }
    }
  });
</script>
</html>

截圖：

v-for的最佳使用技巧

在vuejs中，v-for 的使用是比較常見的，它允許您在模板程式碼中編寫for迴圈。那麼在使用v-for的時候，可曾思考過使用這個指令的一些技巧嗎？

在介紹它的使用技巧之前，我先介紹下它的基本用法吧，在vue中v-for可以遍歷陣列、物件、字串，但是用的最多的還是遍歷陣列，基本方法如下：

<div id="app">
    <ul>
  <li v-for='item in list'>
    {{ item.name }}
  </li>
</ul>
</div>

可能有些初學者在使用的過程中，不會考慮太多的使用技巧，直接遍歷定義在data中的資料，其實vue在設計的初衷，也考慮到了這個問題，如果頻繁使用data中的資料，可能會造成一些效能上的消耗，是相當不友好的。

在本篇文章中，我將介紹六種方法來使你的 v-for 程式碼更加精確，可預測和強大。

1.始終在v-for迴圈中使用key

建議在遍歷資料的時候，都儘可能的加上key，設定一個惟一的鍵屬性，它可以確保元件以您期望的方式工作。有些時候，可能使用索引index也可以，但是在一些特定的場景下，比如多場景登入下，如果不使用key來標識當前使用的登入方式，那麼可能會造成資料的紊亂問題，如果資料量比較大，頁面的資料更新時會造成渲染資料消耗很大的效能甚至出現不可預測的bug，如果我們對每個元素都有唯一的鍵參照，那麼我們就可以更好地準確地預測DOM將如何操作，就可以避免很多不必要的問題出現。

<div id="app">
    <ul>
  <li v-for='item in list'  :key='item.id'>
    {{ item.name }}
  </li>
</ul>
</div>

2.不要在迴圈中使用v-if

一個超級常見的錯誤是使用 v-if 來過濾 v-for 迴圈的資料。Vuejs優先考慮 v-for 而不是 v-if,這意味著元件將回圈遍歷每個元素，然後檢查 v-if 條件以確定是否應渲染。因此，實際上，無論條件是什麼，都將遍歷陣列。儘管這看起來很直觀，但它會導致一個巨大的效能問題

/*千萬不要這樣寫，切記切記*/
<div id="app">
    <ul>
  <li v-for='item in list'
      :key='item.id'
      v-if="item.price<50"
      >
    {{ item.name }}
  </li>
</ul>
</div>

3.使用計算屬性或方法來處理資料後再做資料遍歷

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

使用計算屬性
使用過濾方法

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

<div id="app">
    <ul>
  <li v-for='item in underPrice'
      :key='item.id'
      >
    {{ item.name }}
  </li>
</ul>
</div>

<script>
  export default {
    data () {
      return {
        list: []
      }
    },
    computed: {
      underPrice: function () {
        return this.list.filter(item=> item.price < 50)
      }
    }
  }
</script>

計算屬性是作為屬性使用的，並不是方法。使用computed，可以將資料做快取處理，在每次渲染資料的時候，會優先在快取在找該資料，如果有了直接從快取中取出渲染，如果沒有的話再重新獲取。這樣也大大的提高了效能。

或者可以使用方式來進行變數的篩選以及處理再做遍歷

<div id="app">
    <ul>
  <li v-for='item in underPriceHandle(50)'
      :key='item.id'
      >
    {{ item.name }}
  </li>
</ul>
</div>

<script>
  export default {
    data () {
      return {
        list: []
      }
    },
    methods: {
      underPriceHandle: function (price) {
        return this.list.filter(item=> item.price < price)
      }
    }
  }
</script>

4.在一個範圍內迴圈

儘管大多數情況下，v-for 用於遍歷陣列或物件，但在某些情況下，我們肯定只希望迴圈執行一定次數。

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

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

5.在迴圈中存取專案的索引

除了遍歷陣列和存取每個元素之外，我們還可以跟蹤每個項的索引。

為此，我們必須在專案後新增一個索引值，它非常簡單，可用於分頁，顯示列表索引，顯示排名等。

<ul>
  <li v-for='(item, index) in products' :key='item.id' >
   {{ index }}----{{ item.name }}
  </li>
</ul>

6.遍歷一個物件

我們也可以使用v-for輕鬆地遍歷物件的鍵值對。

與存取元素的索引類似，我們必須向迴圈中新增另一個值。如果我們用一個引數遍歷一個物件，我們將遍歷所有的項。

如果我們新增另一個引數，我們將獲得items 和 key，如果新增第三個，我們還可以存取 v-for 迴圈的索引。

<ul>
  <li v-for='(list, index) in lists' :key='list.id' >
    <span v-for='(item, key, index) in list' :key='key'>
      {{ item }}
    </span>
  </li>
</ul>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。