2.4.5　v-for列表渲染

列表渲染指令是Vue模板语法在HTML标签中提供的语法糖，被它修饰的标签可以直接通过data选项中定义的数组类型数据在HTML标签上进行循环输出，无须通过DOM操作的方式由JS动态渲染到HTML代码中。被v-for修饰的标签上还需要绑定key属性，key属性为唯一标识，主要用于提升列表更新时的渲染速度，key必须是在当前网页内唯一的结果并且不可以为空。

列表渲染的代码如下：

v-bind标签将等号右侧的变量对应的结果绑定在v-bind修饰的属性上，是Vue提供的一个属性绑定的指令，在后续的介绍中会具体介绍它的使用方式。

接下来通过实际案例深入地学习v-for在Vue框架开发中的使用方式，代码如下：

参考案例代码，在data中声明了一个名为list的数组对象，它是一条JSON对象数组，接下来的目标是将其内部的所有数据插入table表格中进行展示，如果使用原始的JS操作，则需要借助字符串拼接的方式或者createElement的方式才能实现，而使用了v-for之后渲染流程可以直接在HTML标签中进行操作，无须编写JavaScript的逻辑。使用v-for之后item对象就相当于数组中的每个JSON对象，以第一次循环为例，当v-for执行第一次循环时item内部存储的数据结构为{id：'a001'，name：'阳顶天'，phone：'17388889887'，email：'xxx@xxx.com'，birthday：'20xx-0x-0x'}，item本身就相当于这个对象，根据分析发现id这个属性具备数据的唯一性，所以使用它来绑定key属性，其他的内部属性对应的数据展示到表格的内部，只需使用item.属性名称。这里需要注意的是，index变量是从0开始计数的，所以在使用它作为列表序号时需要做index+1运算，实现table表格的数据渲染，如图2-8所示。

图2-8　v-for案例的运行结果