v-for实现循环嵌套
<!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循环外层数据，然后再次循环就可以了，这个看代码就可以知道了，就不啰嗦了
v-for实现循环嵌套的更多相关文章
- PHPCMS V9标签循环嵌套调用数据的方法
PHPCMS V9的标签制作以灵活见长,可以自由DIY出个性的数据调用,对于制作有风格有创意的网站模板很好用,今天就介绍一个标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/php ...
- PHPCMS快速建站系列之标签循环嵌套
标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/phpcms/lib/classes/template_cache.class.php 里的 template_parse 方法里 ...
- C#用链式方法表达循环嵌套
情节故事得有情节,不喜欢情节的朋友可看第1版代码,然后直接跳至“三.想要链式写法” 一.起缘 故事缘于一位朋友的一道题: 朋友四人玩LOL游戏.第一局,分别选择位置:中单,上单,ADC,辅助:第二局新 ...
- SQL连接操作符介绍（循环嵌套, 哈希匹配和合并连接）
今天我将介绍在SQLServer 中的三种连接操作符类型,分别是:循环嵌套.哈希匹配和合并连接.主要对这三种连接的不同.复杂度用范例的形式一一介绍. 本文中使用了示例数据库AdventureWorks ...
- for循环与for循环嵌套
今天温习了下分支语句跟for循环,主要讲解了for循环嵌套,这里开始有点迷糊了,整理下思路在做练习 for循环嵌套用我自己的大白话来说就是一个外圈的for程序里面一个套着一个小的for程序,如果在范围 ...
- tonado框架的列表嵌套 （template中for循环嵌套）
学习了tonado框架,渐渐开始明白模板的转换,以后肯定还会遇到很多问题... 功能描述: 页面显示读取的数据库父导航名称,再通过嵌套列表将子导航名称和地址查询出来,返回到 ...
- php for循环嵌套
<?php //2.打印一个50*50的 'o' 的正方形方整, 使用for的嵌套 // oooooo // oooooo // oooooo //for循环嵌套 ...
- For 循环嵌套 0309
For ...
- 循环嵌套，while循环，穷举迭代循环
一.循环嵌套 简单的就是说,在一个for循环里嵌入多个小for循环. 其中,在打矩形.三角形和乘法口诀表之类的题目中,大for循环一般表示的是行数,其余的小for循环式每一行中的内容. 二.while ...
- 6、C#基础整理（for 语句经典习题--for循环嵌套、穷举）
1.for循环嵌套----最基础题目:求阶乘的和 ; int n = int.Parse(Console.ReadLine()); ; i < n; i++) { ;//定义变量sum1,每次循 ...
随机推荐
- 在Ubuntu14.04中配置mysql远程连接教程
上一篇文章,小编带大家学会了在Ubuntu14.04中安装MySQL,没有来得及上课的小伙伴们可以戳这篇文章:如何在Ubuntu14.04中安装mysql,今天给大家分享一下,如何简单的配置MySQL ...
- node.js 中 events emitter 的实现（发布、订阅模式）
const EventEmitter = require('events'); const myEmitter = new EventEmitter(); myEmitter.on('event', ...
- IDEA 开发工具在POM.XML文件中增加依赖
在POM.XML 中使用快捷键 ALT+INSERT 选择第一个,输入关键字即可 选择版本,确认,ok
- cogs 1430. [UVa 11300]分金币
1430. [UVa 11300]分金币 ★☆ 输入文件:Wealth.in 输出文件:Wealth.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 圆桌旁坐着 ...
- Android上玩玩Hook？
在中国互联网这片弱肉强食的丛林中.封闭抄袭是垄断巨头的通行证.创新是弱小创业者的墓志铭. 了解Hook 还没有接触过Hook技术读者一定会对Hook一词感觉到特别的陌生.Hook英文翻译过来就是&qu ...
- js --- 事件冒泡 事件捕获
先上结论: 他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件冒泡是自下而上的去触发事件.绑定事件方法的第三个参数,就是控制事 ...
- 利用css去除input按钮上的文字的几种方法
相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...
- javaweb二
除了servlet规范,还有filter,listener.filter和servlet相似,但是在servlet之前执行,主要区别是有一个FilterChain接口可以执行拦截方法. import ...
- javap 命令 反编译代码
javap 命令 javap -c classname 一个好的分析class二进制文件的 链接 http://blog.csdn.net/pwlazy/article/details/7954169
- 洛谷——P2093 零件分组
https://www.luogu.org/problem/show?pid=2093 题目描述 某工厂生产一批棍状零件,每个零件都有一定的长度(Li)和重量(Wi).现在为了加工需要,要将它们分成若 ...