你对v-for了解多少

313 阅读1分钟
v-for
<div v-for="(item,index) in arr" >{{item}}</div>

可以直接使用item,如果需要使用item和index,如上,上面的做法就相当于Array.forEach(item,index),遍历数组的每一项。item是每一项的内容, index是索引。

循环的时候需要给每一项一个唯一的key值

<div v-for="(item,index) in arr" :key="index">{{item}}</div>

一般也不建议使用index当key值,比如页面上有两组for,分别渲染同一个数据,那么key必然会重复, 控制台会⚠️警告,代码如下,造成key值不唯一。

<div v-for="(item,index) in arr" :key="index">{{item}}</div>
<div v-for="(item,index) in arr" :key="index">{{item}}</div>

🏁🏁🏁重点,vue更新dom的时候, 根据key值寻找dom,数据更新的时候会比对dom是否需要更新,所以key值一定要注意唯一性,保证最小dom操作,一般在项目使用item.id来做唯一性标识,因为在数据库一般用id来做主键,一般不会重复。

v-for不仅可以遍历数组, 还可以遍历对象

<div v-for="(key, value) in obj">{{key}}</div>

也可以遍历数字

<div v-for="item in 19">{{item}}</div>

还可以 遍历字符串

<div v-for="item in substring">{{item}}</div>

打印多个标签,注意template上不能使用key,因为在页面渲染结束后,是没法通过key找到dom的,所以警告,下面用字符串表达式,来实现key的唯一性

<template v-for="(item,index) in arr">
  <div :key="`${index}_1`">{{item}}</div>
  <span :key="`${index}_2`">{{item}}</span>
</template>

🚬每天分享一点点, 欢迎大家讨论, 共同学习, 有不对的地方,欢迎指出🚬