v-for 用于展示列表数据。语法为：v-for="(item, index) in xxx" :key="yyy" 。
v-for 可以遍历数组、对象、字符串（不常用）、指定次数（很少使用）
遍历数组【常用】
<div id="APP"> <ul> <li v-for="item in list"> {{item.name}} - {{item.age}} </li> </ul> </div>
注：v-for 一般写在需要重复创建的标签上，其中 item 是数组中的每一项，list 就是需要循环的数据。
const vm = new Vue({ el: "#APP", data(){ return { list:[ {id:1, name:"张三", age:21}, {id:2, name:"李四", age:18}, {id:3, name:"王五", age:26} ] } } });
遍历数组时的下标
<div id="APP"> <ul> <li v-for="(item,index) in list"> {{item.name}} - {{item.age}} - {{index}} </li> </ul> </div>
注：v-for 中的 index 就是每次循环生成的下标，推荐使用下标时用小括号将 item 和 index 包裹起来。
const vm = new Vue({ el: "#APP", data(){ return { list:[ {id:1, name:"张三", age:21}, {id:2, name:"李四", age:18}, {id:3, name:"王五", age:26} ] } } });
注：可以用 of 替代 in 作为分隔符，因为 of 更接近 JS 迭代器的语法，
例：
v-for="(item,index) of list"
维护状态 key
key 属性用于给标签添加一个唯一标识，就像身份证号一样。推荐 v-for 配合 key 使用。
当 v-for 重新渲染时，Vue 会根据每个标签的 key 值对比内容是否发生变化，如果未发生变化，将直接复用这个标签，如果发生变化，那么只会将发生变化的标签替换为新标签。
<div id="APP"> <ul> <li v-for="(item,index) in list" :key="item.id"> {{item.name}} - {{item.age}} - {{index}} </li> </ul> </div>
const vm = new Vue({ el: "#APP", data(){ return { list:[ {id:1, name:"张三", age:21}, {id:2, name:"李四", age:18}, {id:3, name:"王五", age:26} ] } } });
注：key 值不会在页面中显示，因为 key 值只会存在于虚拟 DOM 中，用于对比元素内容是否发生变化。
遍历对象
<div id="APP"> <ul> <li v-for="(val,name) of car" :key="name"> {{val}} - {{name}} </li> </ul> </div>
注：当遍历对象时，第一个参数 val 表示对象中的值，第二个参数 name 表示对象中的键名。并且我们用 name 作为 key 的唯一标识，因为对象中的键名不允许重复。
const vm = new Vue({ el: "#APP", data(){ return { car:{ name:"奥迪A8", price:"70万", color:"黑色" } } } });
遍历字符串【不常用】
<div id="APP"> <ul> <li v-for="(char,index) of str" :key="index"> {{char}} - {{index}} </li> </ul> </div>
注：当遍历字符串时，第一个参数 char 表示字符串中的每个字符，第二个参数 index 表示每个字符的下标。这里我们采用 index 下标作为 key 的唯一标识【不建议】
指定遍历次数【很少使用】
<div id="APP"> <ul> <li v-for="(number,index) of 5" :key="index"> {{number}} - {{index}} </li> </ul> </div>
注：当指定遍历次数时，第一个参数 number 表示数字，从 1 开始，第二个参数 index 表示每个数字的下标，从 0 开始。这里同样采用 index 下标作为 key 的唯一标识（不建议）
原创作者：吴小糖
创作时间：2023.2.16
