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
