《跟热饭一起学习vue吧》Part.13 v-for循环

2022-05-19 16:46:08 浏览数 (1)

v-for

看这个循环,大家如果熟悉python的估计都能猜出怎么用的大概。那么它是循环什么的?

其实是循环元素标签的,让你的元素标签循环生成并展示。

举个例子,你有5个人,想在前端展示5个人的名字。那么你要不用v-for循环,就要手动写5个元素,比如li标签:

效果如下:

这样写起来肯定很麻烦,万一要有几十个 几百个人呢?所以就有了循环生成元素的指令:v-for

这些人名数据,我们从后端传入或者接口返回或者手写在 vue构造器的data里即可。

如上图,我设置了一个叫sites的列表变量,内部放上这个五个人名字。

那么怎么在dom层引用呢?

很简单,在你要循环的元素里加上 v-for:"循环表达式" 即可。

循环表达式 就是 我们熟悉的,i in list:

如图,可以正常循环生成5个li,展示的最终页面和我们手写5个li标签一致。

循环体子元素是字典

如上图,仍然可以正常显示。

然后我们继续给这个字典加其他key。

照葫芦画瓢,一样可以展示出来:

好了本节课就到这里,怎么样,是不是感觉很简单???

0 人点赞