v-for循环数组/对象/数组对象

循环数组

对数组的循环可以说是最基础的。

item指的是数组元素，index指的是下标。

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{index}}--{{item}}
    </div>
  </div>
</template> 

<script>
export default {
  name: 'test',
  data () {
    return { 
      list: ['数据1', '数据2', '数据3']
    }
  }
}
</script>

 

循环对象

不仅数组可以被循环，对象也可以被循环。（碎碎念：只不过平时用得少，我也是做需求的时候才想到的）

循环对象和循环数组的方法大同小异，只有里面的参数不同，使用的时候注意区分！

value指的是属性值，key指的是属性名，index指的是下标。

<template>
  <div>
    <div v-for="(value, key, index) in list" :key="index">
      {{index}}--{{value}}--{{key}}
    </div>
  </div>
</template> 

<script>
export default {
  name: 'test',
  data () {
    return { 
      list: {
        name: '姓名',
        age: '年龄',
        group: '团体'
      }
    }
  }
}
</script>

 

循环数组对象

 这个在项目使用中是最广泛的，它的方法和循环数组的方法一模一样，唯一不同的点在于它的key值（唯一标识）可以使用具体的对象属性来展示，比如 item.id 等。

不过为了保险起见，用index也是可以的，至少它能确保自身唯一性，有些时候对象内不一定会有唯一值！

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{ item.id }}--{{ item.name }}--{{ item.group }}
    </div>
  </div>
</template> 

<script>
export default {
  name: 'test',
  data() {
    return {
      list: [
        { id: '1', name: 'Raven', group: 'NXX' },
        { id: '2', name: 'Libra', group: 'NXX' },
        { id: '3', name: 'Adjudicator', group: 'NXX' },
        { id: '4', name: 'King', group: 'NXX' }
      ]
    }
  }
}
</script>

 

 

 

 

特别说明

key值代表的是唯一标识，默认必须搭配v-for使用的，一般来说可以设置任意唯一值，且该值不能是可变的，但如果想要百分百避免重复可以引入index。

需要注意的是，当对数组进行逆序增加/删除时，使用index作为key值会降低效率。

 

key属性的作用

1.  提升v-for渲染的效率

2. 提高渲染性能，避免重复渲染（vue会辨认未变化内容，只渲染变化了的）

3. 避免数据混乱的情况出现