文章の目录
- 一、v-for循环数组
- 二、v-for循环对象
- 三、v-if与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^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
