Vue系列之v-for循环结构

---

一、v-for循环数组

<li v-for="item in items">{
  {item}}</li>

其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

v-for 还支持一个可选的第二个参数，即当前项的索引。

<li v-for="(item, index) in items">{
  {item}}</li>

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：

<li v-for="item of items">{
  {item}}</li>

二、v-for循环对象

用 v-for 来遍历一个对象的 property。

一个参数是值

<li v-for="value in object">{
  { value }}</li>

也可以提供第二个的参数为 property 名称 (也就是键名)：

两个参数时，第一个参数是值，第二个参数是属性名

<div v-for="(value, name) in object">{
  { name }}: {
  { value }}</div>

还可以用第三个参数作为索引：

三个参数时，第一个参数是值，第二个参数是属性名，第三个参数是索引

<div v-for="(value, name, index) in object">{
  { index }}. {
  { name }}: {
  { value }}</div>

在使用for循环的时候，最好给每个元素添加一个key，至于key有什么作用，请看这篇文章【Vue系列之v-for中key的作用】

三、v-if与v-for一起使用

注意我们不推荐在同一元素上使用 v-if 和 v-for。
当它们处于同一节点，v-for 的优先级比 v-if 更高

<div v if="value==12" v for="(value, key, index) in object"></div>

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

转载：https://blog.csdn.net/weixin_62277266/article/details/128141826