简单的讲一下适用
比如有些列表多个用户,会有多个爱好,多个朋友,多个技能等等,Vue可以用简单的几行代码实现嵌套的数组循环输出,帮你简单搞定大量的输出逻辑
直接上例子
题设
有一个数组有俩人名字叫aaa和bbb,他们都有一个属性朋友,aaa的朋友有a1,a2;bbb的朋友有b1,b2;接下来使用Vue实现他们的输出
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
<div id="app">
<div v-for="(item,index) in haha">
<div>{{item.name}}</div>
<div v-for="(item,index) in item.friends">
<div>{{item.name}}</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
haha:[
{'name':'aaa',
'friends':[
{'name':'a1'},
{'name':'a2'}
]},
{'name':'bbb',
'friends':[
{'name':'b1'},
{'name':'b2'}]
}
]
}
})
</script>
</html>
输出显示
以上事例测试代码及输出来自JS bin