【Uniapp-Vue3】v-for列表渲染的用法

如果我们想要重复渲染多个元素，就可以使用v-for进行渲染。

比如我们想要将元素渲染5次：

 

如果我们想要知道当前元素是渲染的第几个，可以在v-for的时候添加参数index，并在差值表达式中填入index：

则index会以0开始进行渲染。 

 

我们也可以对数组进行遍历，比如有一个数组，里面的元素都是对象，我们遍历的方法就是如下这样：

 

接下来我们讲一下key的问题：

在微信小程序中，如果使用v-for但没有给元素安排key值，就会出现警告。

所以我们就需要给元素设置key值，常见的设置key值有如下两种方法：

第一种是使用index作为key值：

第二种就是对象中安排的id值作为key值：

那么二者有何区别？

我们使用例子来说明，我遍历了一个列表，每一项都有一个勾选框和删除按钮，我实现了删除的逻辑。

我们先看一下使用index作为key值会发生什么：

我选中了李四，再点击删除按钮。 

 

我们会发现选中跑到了王五的身上：

我们再换成以id作为key值看看：

结果正常。 

 

更具体的原理可以在这篇文章查看：

Vuev-for列表渲染：关键与原理,-CSDN博客