vue学习笔记-列表循环（1）

vue学习之列表循环

列表循环是十分常用的，直接上代码

<template>
  <div id="app">
    <ul>
      <li v-for="(item,index) in list1" :key="index">
        {{item}}
      </li>
    </ul>
    <hr>
    <ul>
      <li v-for="(item,index) in list2" :key="index">
        {{item.title}}
      </li>
    </ul>
    <hr>
    <!-- 下面这个比较总要-->
    <ul>
      <li v-for="(item,index) in list3" :key="index">
        {{item.cate}}
        <ol>
          <li v-for="(card,index) in item.list" :key="index">
            {{card.title}}
          </li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      list1:[
        '内容111','内容222','内容333'
      ],
      list2:[
        {'title':'栏目1'},
        {'title':'栏目2'},
        {'title':'栏目3'}
      ],
      list3:[
        {
          'cate':'比亚迪',
          "list":[
            {'title':'比亚迪唐'},
            {'title':'比亚迪宋'},
            {'title':'比亚迪元'},
          ]
        },
        {
          'cate':'别克',
          "list":[
            {'title':'昂科拉'},
            {'title':'君威'},
            {'title':'君越'},
          ]
        }
      ]
    }
  },
  methods:{

  }
}
</script>

运行代码如下：