<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>在一个空间中同时循环数组和对象 / 同时循环两个数组</title>
</head>
<body>
<div id="app">
<!--循环对象和数组-->
<div v-for="(item,key,index) in obj">
<!--{{ key }} {{ index }}-->
{{ arr[index].name }} {{ item }}
</div>
<!--循环两个数组-->
<div v-for="(item, index) in arr">
{{ item.name }} {{ arrs[index].text }}
</div>
<!--循环两个对象 不可行-->
<div v-for="(item,key,index) in obj">
{{ item }} {{ objs[key].one }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
arr:[
{'name':'一秀'},
{'name':'二举'},
{'name':'三红'},
{'name':'四进'}
],
arrs:[
{'text':'自古多情'},
{'text':'空余恨'},
{'text':'此恨绵绵'},
{'text':'无绝期'}
],
obj:{
age:16,
job:'web',
eat:'黄焖鸡米饭',
keyboard:'非机械'
},
objs:{
one:'this is one',
two:'this is two',
three:'this is three',
four:'this is four'
}
}
})
</script>
</body>
</html>