Vue – 列表渲染 v-for 基本使用

vue 提供了v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for

v-for 指令需要使 用 item in list 形式的特殊语法，其中：

list 是待循环的数组，由 data 字段中定义的数组

item 是被循环的每一项，是一个形参，可随意定义

索引

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为(item, index) in items

注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如(user, i) in userlist

key

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种 默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲 染的性能。此时，需要为每项提供一个唯一的key 属性：

key 的注意事项

①  key 的值只能是字符串或数字类型

②  key 的值必须具有唯一性（即：key 的值不能重复）

③  建议把数据项 id 属性的值作为key 的值（因为 id 属性的值具有唯一性）

④  使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤  建议使用v-for 指令时一定要指定key 的值（既提升性能、又防止列表状态紊乱）