v-for可以循环data中的数组。
下面循环遍历arr,item作为循环变量依次成为arr中的每一项。key影响最小量更新。
在VSCode编辑器不报错的情况下可以直接写v-for="item in arr",某些情况下受VSCode中所装插件影响编辑器会出现报错的情况,此时的解决方法是多写一个动态属性 :key="item"。


v-for的功能非常强大,除了能循环data中的数组还能循环data中没有的常数。


这个功能可以被运用于table表格的编写,十分快捷方便。例如写一个九九乘法表:


用v-show改进一下再写个样式就是小时候文具盒中常见的三角九九乘法表:



被循环对象的下标(序号)- index
完整的v-for指令中可以获取到被循环对象的下标。
在不需要用到下标的情况下v-for指令常常会被简写为 v-for="item in arr" 或 v-for="i in arr",但用到下标的情况也很多,比如一下案例需要删除列表中的某一项,运用下标来实现是最简单方便的:


上面用到了splice通过数组中每一项的下标index来删除数组中的项,如果需要通过检索特定数据删除,就需要用到另一种方法————filter()函数过滤。filter()函数底层有遍历可以达到隔除不符合条件的项的效果从而间接实现删除项。比如下面案例的数组中每一项都有一个独一无二的id,通过检索这个id来删除数组中的项:
JS-data:

HTML:

JS-methods:

