v-for列表渲染

vue中对json数据格式的渲染，实现选项卡的功能

利用v-for列表渲染

HTML结构部分

<div id="top">
  <div class="title">
    <span v-for="(value,key,index) in tab.mapList" :key="index" @click="tab(index)"
          :class="{'active':current==index}">{{key}}</span>
  </div>
  <div v-for="(arr,key,index) in tab.mapList" :key="index" v-if="current==index">
    <ul v-for="(item,key) in arr" class="ul">
      <li>片名：{{item.name}}</li>
      <li>时长：{{item.time}}</li>
    </ul>
  </div>
</div>

script部分

export default {
  data() {
    return {
      current: 0,
        tab: {
          "mapList": {
            "oumei": [{
              "name": "变形金刚1",
              "time": "1小时"
            }, {
              "name": "变形金刚2",
              "time": "2小时"
            }, {
              "name": "变形金刚3",
              "time": "3小时"
            }],
            "guochan": [{
              "name": "战狼1",
              "time": "4小时"
            }, {
              "name": "战狼2",
              "time": "5小时"
            }, {
              "name": "战狼7",
              "time": "6小时"
            }]
        }
      }
    }
  },
  // tab方法
  methods: {
      tab (index) {
        this.current = index
      }
    }
}

v-for(value,key,index) in object；可传入3个参数，分别为值，键和索引

例如：
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

数据部分：
object: {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
}
渲染的结果：
0.firstName. John
1.lastName.Doe
2.age.30