Vue中v-for指令

vue中经常用到的指令便是v-for，经常与HTML标签结合使用用于数据的遍历摆放，这里学习记录一下。

基本语法

我们把其理解成C语言或者c++中的for循环即可，item为topArticles中的一个子对象，key为索引，从0开始，表示这是第几个子对象。

界面

          
            

              
              

                {
    { item.title }}
                

                Author:{
    { item.author }}
              
            
          

数据

data可以是数据对象，将里面的数据通过{ { item.author }}来进行访问并进行展示

export default {
data() {
    return {
topArticle: [
        {
          title: 'title1',
          url: 'url1',
          author: 'author1'
        },
        {
          title: 'title2',
          url: 'url2',
          author: 'author2'
        }
      ],
      }
      }
}

data也可以是一个数字，比如我们需要一个六次的循环，data为6即可。

{
    {index}}