Vue中v-for指令

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>