從多個方面詳解Vue遍歷對象

一、v-for的基本使用

// 定義數組數據源
data() {
  return {
    list: ['apple', 'banana', 'pear']
  };
}

// 遍曆數組，使用 v-for 指令

  

    
{{ item }}
  


// 輸出結果

  
apple
  
banana
  
pear

在Vue中，使用v-for指令可以快速的遍曆數組數據源，當使用v-for指令時，需要根據數據源的結構，聲明一個輔助變量來接收每個元素的值，方便進行數據操作和渲染。

在這個例子中，我們定義了一個數組數據源，使用v-for指令遍曆數組，並且將每個元素使用li標籤顯示出來。最終輸出的結果就是一個帶有3個水果名稱的無序列表。

二、v-for的對象遍歷

// 定義對象數據源
data() {
  return {
    list: {
      apple: 'red',
      banana: 'yellow',
      pear: 'green'
    }
  };
}

// 遍歷對象，使用 v-for="value, key in list" 指令

  

    
{{ key }} -> {{ value }}
  


// 輸出結果

  
apple -> red
  
banana -> yellow
  
pear -> green

同樣的，v-for指令也可以遍歷對象數據源。遍歷對象的時候，v-for指令需要使用一個特殊的語法：v-for=”(value, key) in list”，這裡的value表示對象的屬性值，key表示對象的屬性名稱。在遍歷完畢之後，我們就可以獲取每一個屬性的值和屬性名稱進行操作和渲染了。

在這個例子中，我們定義了一個對象數據源，使用v-for指令遍歷對象，並且將每個屬性名稱和屬性值使用li標籤顯示出來。最終輸出的結果就是一個帶有3種顏色的水果列表。

三、v-for的索引值

// 定義數組數據源
data() {
  return {
    list: ['apple', 'banana', 'pear']
  };
}

// 遍曆數組，顯示索引值，使用 v-for="(item, index) in list" 指令

  

    
{{ index + 1 }}. {{ item }}
  


// 輸出結果

  
1. apple
  
2. banana
  
3. pear

在Vue中，我們也可以使用特殊的語法獲取當前元素在數組中的索引值。在v-for指令中，我們可以使用v-for=”(item, index) in list”的語法，來獲取每個元素所在的索引值和值。

在這個例子中，我們定義了一個數組數據源，使用v-for指令遍曆數組，並使用index變量獲取每個元素的索引值。最終輸出的結果就是一個帶有1,2,3，分別對應不同水果的列表。

四、v-for的遍歷對象數組

// 定義對象數組數據源
data() {
  return {
    list: [
      { name: 'apple', color: 'red' },
      { name: 'banana', color: 'yellow' },
      { name: 'pear', color: 'green' }
    ]
  };
}

// 遍歷對象數組，使用 v-for="(item, index) in list" 指令

  

    
{{ item.name }} -> {{ item.color }}
  


// 輸出結果

  
apple -> red
  
banana -> yellow
  
pear -> green

在Vue中，我們可以使用v-for指令遍曆數組中的對象，和遍歷普通數組的方式類似。遍曆數組中的對象時，需要使用對象屬性來獲取每個元素的值和進行渲染。這裡的語法類似於使用點號(.)來獲取對象屬性的方式，例如item.name。

在這個例子中，我們定義了一個對象數組數據源，使用v-for指令遍曆數據源，並且將每個元素的名稱和顏色使用li標籤展示在頁面上。最終輸出的結果就是一個帶有3個水果名稱和顏色的列表。

五、v-for的帶有過濾條件的使用

// 定義數組數據源
data() {
  return {
    list: ['apple', 'banana', 'pear']
  };
}

// 過濾列表，只輸出長度大於5的項，使用 v-for="(item, index) in filterList" 指令

  

    
{{ index + 1 }}. {{ item }}
  


// 過濾器函數，只保留長度大於5的元素
computed: {
  filterList() {
    return this.list.filter(item => {
      return item.length > 5;
    });
  }
}

// 輸出結果

  
1. banana

在有些情況下，我們需要在渲染數組元素前進行過濾處理來保證輸出結果符合我們的需求。在Vue中，我們可以使用過濾器函數來處理數據源，然後再使用v-for指令進行渲染。

在這個例子中，我們定義了一個數組數據源，使用v-for指令遍曆數據源，並使用computed屬性來定義過濾器函數filterList，處理list數組數據源，只保留長度大於5的元素。最終輸出結果只有1個水果，即banana。