v-for实现循环嵌套
2024-09-08 11:06:40
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js"></script>
</head> <body>
<div id="app">
<ul>
<!-- 先从origin获得对应的数据 -->
<li v-for="(value,index,key) in origin">
{{value.info}}
<!-- 在根据从origin获得的数据遍历对应的对象 -->
<ul>
<li v-for="items in value.project">
{{items}}
</li>
</ul>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
origin:[
{
info:"all",
"project":{"name":"wikina","age":"20","birthday":"1996"},
},
{
info:"all",
"project":{"name":"wikina","age":"20","birthda":"1996"},
},
{
info:"all",
"project":{"name":"wikina","age":"20","birthda":"1996"},
}
] }
})
</script>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js"></script>
</head> <body>
<div id="app">
<ul>
<!-- 先从origin获得对应的数据 -->
<li v-for="(value,index,key) in origin">
{{value.info}}
<!-- 在根据从origin获得的数据遍历对应的对象 -->
<ul>
<li v-for="items in value.project">
{{items}}
</li>
</ul>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
origin:[
{
info:"all",
"project":{"name":"wikina","age":"20","birthday":"1996"},
},
{
info:"all",
"project":{"name":"wikina","age":"20","birthda":"1996"},
},
{
info:"all",
"project":{"name":"wikina","age":"20","birthda":"1996"},
}
] }
})
</script>
</body> </html>
这个原理很简单，先使用v-for循环外层数据，然后再次循环就可以了，这个看代码就可以知道了，就不啰嗦了
最新文章
- 简单翻译工具--必应词典第三方api使用方法
- PSP个人耗时
- [BZOJ1089][SCOI2003]严格n元树(递推+高精度)
- java中两种单例模式
- SqlBulkCopy与触发器，批量插入表(存在则更新,不存在则插入)
- 冒泡算法（C++模板实现）
- Java学习作业(14.4.21)
- linux驱动面试题2
- WPF笔记(1.9 样式和控件模板)——Hello，WPF！
- FreeMarker 实例
- elasticsearch简单操作（二）
- Codeforces Round #443 (Div. 1) B. Teams Formation
- 关于APS在企业生产计划上的应用
- ［转］ubuntu中查找软件的安装位置
- e藏在哪里？
- SSRS创建复合型图表
- part1：8-远程登录Linux
- 【JAVA-WEB】在url上追加sessionid
- HDU 5875 Function 大连网络赛 线段树
- 介绍Web项目中用到的几款JQuery消息提示插件