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。
照葫芦画瓢,一样可以展示出来: