列表渲染:数组、对象、过滤、排序遍历
一、数组遍历
1.1、实例
数组遍历使用v-for进行遍历,下面是persons数组,在视图层中使用v-for遍历,把persons展示在页面上
1.2、绑定key
上图的示例中,我们在使用v-for的时候,没有给数组中的每条记录绑定key,有人可能会问为什么要绑定KEY呢?
- key是给每一个虚拟的节点一个唯一的id,为更精准方便的确定列表中的每条数据,在对数组中的数据进行更新和删除等操作时,通过key进行定位,避免操作错了数据
- 使用注意
- 有的人可能会说直接使用上面的index作为key,实际这样使用有可能会出问题的,官网使用的列表里面的元素的编号作为key的(我们示例中的数组的对象是没有编号的):
- 如下图,使用index作为key了,实际不建议使用index作为key:
- 有的人可能会说直接使用上面的index作为key,实际这样使用有可能会出问题的,官网使用的列表里面的元素的编号作为key的(我们示例中的数组的对象是没有编号的):