列表渲染，是指我们可以用循环的方式，一次性批量渲染多个相同的元素节点。
Vue 中提供了 v-for 指令来实现列表渲染。

一、基本语法

Vue 中的 v-for 指令和原生 JS 的 for 循环类似，都可以用来遍历数组，同时在遍历过程中可以获取到数组中的每一项元素以及对应的下标。
区别在于 v-for 是直接设置在 HTML 标签身上，循环的次数决定了当前元素节点渲染的个数。
基础语法如下：

  1. <div v-for="(item, index) in 数组"></div>

其中，item 和 index 是任意变量名（可以自定义其他变量名），用来接收数组中的元素和对应下标。
示例代码：

  1. <div id="app">
  2.     <h2 v-for="(item, index) in arr">
  3.         第 {{index + 1}} 轮循环，元素是 {{item}}，下标是 {{index}}。
  4.     </h2>
  5. </div>
  6. <script>
  7.     new Vue({
  8.         el: '#app'
  9.         data () {
  10.             return {
  11.                 arr: ['a', 'b', 'c']
  12.             }
  13.         }
  14.     })
  15. </script>

1、省略 index

如果在列表渲染中不需要使用 index，可以省略不写。index 省略的同时，小括号也可以一并省略了。
语法结构如下：

  1. <div v-for="item in 数组"></div>

二、key 属性

Vue 中要求，每一个通过循环产生的元素身上，都需要添加一个 key 属性。
key 属性的属性值需要满足以下几个要求：

  1. 只能是数字或字符串类型；
  2. 在当前循环中必须是唯一的；
  3. 固定不变的，不会随着数组的变化而发生改变（因此不建议使用 index 作为 key 属性的值）；

由于在同一个循环产生的元素之间，key 属性的值不能重复。因此，循环元素的 key 属性一定是通过 **v-bind** 动态绑定的。
语法结构如下：

  1. <div v-for="item in 数组" :key="属性值"></div>

我们给前面的示例代码加上 key 属性：

  1. <h2 v-for="(item, index) in ['a', 'b', 'c']" :key="item">
  2.     第 {{index + 1}} 轮循环，元素是 {{item}}，下标是 {{index}}。
  3. </h2>

三、遍历其他类型数据

v-for除了可以遍历数组外，还可以遍历对象、数字、字符串。

1、遍历对象

语法结构如下：

  1. <div v-for="(value, key, index) in 对象" :key="属性值"></div>

参数说明：

  • value： 对象中每一个属性的值；
  • key：对象中每一个属性的键名；
  • index：从 0 开始的每一条数据的下标；

参数的顺序不能调换，当只有一个 value 参数时，小括号也可以省略。

2、遍历字符串

语法结构如下：

  1. <div v-for="(item, index) in 字符串" :key="属性值"></div>

参数说明：

  • item： 字符串中的每一个字符；
  • index：字符串中每一个字符的下标；

参数的顺序不能调换，当只有一个 item 参数时，小括号也可以省略。

3、遍历数字

语法结构如下：

  1. <div v-for="(item, index) in 数字" :key="属性值"></div>

参数说明：

  • item： 从 1 开始叠加的数字；
  • index：从 0 开始叠加的下标；

参数的顺序不能调换，当只有一个 item 参数时，小括号也可以省略。