Vue2（10）列表渲染学习笔记

Vue2列表渲染学习笔记

一、基本列表渲染

Vue2允许我们使用v-for指令基于一个数组或对象来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组或对象，而item则是被迭代的数组元素的别名。

1. 遍历数组

   当v-for遍历数组时，元素可以接收两个参数：元素值和元素的下标。语法如下：

   <li v-for="(item, index) in items">{{ item }} - {{ index }}
   </li>
   

   其中，items是源数据数组，item是数组元素的别名，index是当前元素的下标。

2. 遍历对象

   v-for也可以用来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用Object.keys()的返回值来决定。语法如下：

   <div v-for="(value, key) in object">{<