从多个方面详解Vue遍历对象

一、v-for的基本使用

// 定义数组数据源
data() {
  return {
    list: ['apple', 'banana', 'pear']
  };
}

// 遍历数组，使用 v-for 指令

   

// 输出结果

   

  
    
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" 指令

   

// 输出结果

   

  
    
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" 指令

   

// 输出结果

   

  
    
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" 指令

   

// 输出结果

   

  
    
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" 指令

   

// 过滤器函数，只保留长度大于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。