vue中经常用到的指令便是v-for,经常与HTML标签结合使用用于数据的遍历摆放,这里学习记录一下。
基本语法
我们把其理解成C语言或者c++中的for循环即可,item为topArticles中的一个子对象,key为索引,从0开始,表示这是第几个子对象。
<sui-list-item v-for="(item, key) in topArticles">
界面
<sui-list-item v-for="(item, key) in topArticles">
<div style="display: flex">
<img src="https://himg.bdimg.com/sys/portraitn/item/72a1ced6ccd8b0accec4b6f94cdbed">
<div style="justify-items: center">
<span style="font-size: 18px">{{ item.title }}</span>
<br>
<span style="color:gray">Author:{{ item.author }}</span>
</div>
</div>
</sui-list-item>
数据
data可以是数据对象,将里面的数据通过{{ item.author }}来进行访问并进行展示
export default {
data() {
return {
topArticle: [
{
title: 'title1',
url: 'url1',
author: 'author1'
},
{
title: 'title2',
url: 'url2',
author: 'author2'
}
],
}
}
}
data也可以是一个数字,比如我们需要一个六次的循环,data为6即可。
<p v-for="index in 6">{{index}}</p>