Vue-14- 列表渲染 v-for
前言
在前面的章节中,我们已经了解了关于 Vue
的条件渲染,今天我们就一起来看看 Vue
的列表渲染,即 For
循环。
例子
v-for
和 Python
中的 for
循环一样,Vue
的列表渲染也遵循 item in items
的规范。item
为 items
中的元素别名。
代码
复制代码
效果
![](https://static001.geekbang.org/infoq/3c/3c421d93e3d2f0eb0b7078d898b9952a.png)
v-for 中使用对象
复制代码
在对对象进行循环遍历的时候,
value
,key
,indx
的顺序是固定的,即第一个参数获对象的值,最后一个参数获取索引。
效果
![](https://static001.geekbang.org/infoq/04/04fd3fe0d9fe79bfbab932065481c25f.png)
v-for 中使用 v-if
假如我们要遍历一个任务列表,但是只显示已完成的任务,此时我们就可以使用 v-for+v-if
实现。
复制代码
v-if in v-for
场景中,v-for
的优先级要高于v-if
,所以v-if
会分别在每个for
循环中重复运行。
效果
只显示 status=1 的任务。
![](https://static001.geekbang.org/infoq/ed/ed052c3393197c1dbcf6076f24748f50.png)
以上就是今天的全部内容了,感谢您的阅读,我们下节再会。
版权声明: 本文为 InfoQ 作者【Python研究所】的原创文章。
原文链接:【http://xie.infoq.cn/article/f026e946cdffeaf9ea26e22e0】。文章转载请联系作者。
评论