Vue3 _ 5. Vue 列表渲染

我们在之前学习 HTML 中，会经常用到表格、ul 啊这些去显示数据。之前的做法是通过 th:each（thymeleaf 框架），c:forEach（Servlet JSTL）去做的。

Vue 也给我们提供了一个指令：v-for。来学习一下

一、v-for 指令

打开官网：https://v3.cn.vuejs.org/guide/list.html

通过第一段读取，我们可以知道，v-for 是使用 item in items 的格式去进行适配数据，其中 items 是数据源，也就是我们以后从后端读取到的数据，而 item 就是要迭代的对象。

来感受一下它的用法。

可以看到，这个列表已经被渲染出来了。

v-for 除去可以直接这样的渲染列表，还可以支持索引的获取，这个索引我们到时候可以用来做序号。来看一下。

v-for 指令中，将括号中第二个参数定义为索引。这个是固定写法，但是可以修改这个参数的名字。好比说你叫 kkk，aaa 啥的，都可以。

但是有一个问题，这个索引是从 0 开始计数的，我们可以用之前学习的知识，给这个索引进行 +1 操作，这样序号就可以展示出来了。再来看一下。

二、v-for 遍历对象

我们先来定义一个对象。（直接官网复制一下）

然后我们再复制一下官网的 ui。

我们来看看效果。

可以看到哈，没有问题。

在遍历对象的过程中，我们同样可以提供第二个参数，在这里，第二个参数的意思是，这个对象遍历的 key。

来写一下。

可以看到，这个 key 就是我们遍历的对象的属性名称。

除去第二个参数，我们还可以添加第三个参数，第三个参数就是索引的意思。再来看一下

三、v-for 遍历对象数组

其实这个和上面的很类似。直接上代码

运行一下~~~

是不是~~~

但是要区分一下，我们上面遍历的是对象，下面的这个是一个数组，！！！看清楚了

这一篇东西不多，自己练习一下

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~