<!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实现循环嵌套的更多相关文章

  1. PHPCMS V9标签循环嵌套调用数据的方法

    PHPCMS V9的标签制作以灵活见长,可以自由DIY出个性的数据调用,对于制作有风格有创意的网站模板很好用,今天就介绍一个标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/php ...

  2. PHPCMS快速建站系列之标签循环嵌套

    标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/phpcms/lib/classes/template_cache.class.php 里的 template_parse 方法里 ...

  3. C#用链式方法表达循环嵌套

    情节故事得有情节,不喜欢情节的朋友可看第1版代码,然后直接跳至“三.想要链式写法” 一.起缘 故事缘于一位朋友的一道题: 朋友四人玩LOL游戏.第一局,分别选择位置:中单,上单,ADC,辅助:第二局新 ...

  4. SQL连接操作符介绍（循环嵌套, 哈希匹配和合并连接）

    今天我将介绍在SQLServer 中的三种连接操作符类型,分别是:循环嵌套.哈希匹配和合并连接.主要对这三种连接的不同.复杂度用范例的形式一一介绍. 本文中使用了示例数据库AdventureWorks ...

  5. for循环与for循环嵌套

    今天温习了下分支语句跟for循环,主要讲解了for循环嵌套,这里开始有点迷糊了,整理下思路在做练习 for循环嵌套用我自己的大白话来说就是一个外圈的for程序里面一个套着一个小的for程序,如果在范围 ...

  6. tonado框架的列表嵌套 （template中for循环嵌套）

            学习了tonado框架,渐渐开始明白模板的转换,以后肯定还会遇到很多问题... 功能描述:       页面显示读取的数据库父导航名称,再通过嵌套列表将子导航名称和地址查询出来,返回到 ...

  7. php for循环嵌套

    <?php     //2.打印一个50*50的 'o' 的正方形方整, 使用for的嵌套     // oooooo     // oooooo     // oooooo //for循环嵌套 ...

  8. For 循环嵌套 0309

                                                                                                     For ...

  9. 循环嵌套，while循环，穷举迭代循环

    一.循环嵌套 简单的就是说,在一个for循环里嵌入多个小for循环. 其中,在打矩形.三角形和乘法口诀表之类的题目中,大for循环一般表示的是行数,其余的小for循环式每一行中的内容. 二.while ...

  10. 6、C#基础整理（for 语句经典习题--for循环嵌套、穷举）

    1.for循环嵌套----最基础题目:求阶乘的和 ; int n = int.Parse(Console.ReadLine()); ; i < n; i++) { ;//定义变量sum1,每次循 ...

随机推荐

  1. 简述SQL with(unlock)与with(readpast)

    所有Select加 With (NoLock)解决阻塞死锁,在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS ...

  2. Linux常用图片查看处理软件

    1.Shotwell是一款轻量级的图片管理软件,GNOME桌面环境默认自带,您可以使用它来从数码相机中导入相片.shotwell允许用户对图片进行管理,并且提供了一些基本的编辑功能,您可以对图片进行剪 ...

  3. Linux常用视频播放器

    1.SMplayer是一款跨平台的视频播放工具,可以支持大部分的视频和音频文件.它支持音频轨道切换.允许调节亮度.对比度.色调.饱和度.伽玛值,按照倍速.4倍速等多种速度回放.还可以进行音频和字幕延迟 ...

  4. ubuntu server 网络配置，主机名配置

    一.通过命令ifconfig -a 查看可用网络设备 通过上面的命令,本机可用的网络设备为enp4s0f0 和enp4s0f1 ,不同的系统版本和硬件配置网络设备名可能不一样,所以一定要先确认本机可用 ...

  5. SQL Server 2008 R2 超详细安装图文教程及问题解决(锐姿公司安装）

    问题点: 1.为了sqlserver与mysql 的安全,建议数据库低权限运行.禁止远程访问 1433与 3306端口等. 2.安装提示.net 3.5没有安装 ,在server2012的添加 3. ...

  6. 2017-2018年红头发新版Cisco认证网络工程师(CCNA-R&S)全新讲解分享

    网名"红头发",多年授课经验,业内资深思科认证讲师,其所写的CISCO认证原创技术文章风靡各大网站与培训机构.精通CISCO各类路由交换产品,熟悉JUNIPER M/T系列路由产品 ...

  7. mysql的my.cnf文件详解

    一.缘由 最近要接手数据库的维护工作,公司首选MySQL.对于MySQL的理解,我认为很多性能优化工作.主从主主复制都是在调整参数,来适应不同时期不同数量级的数据. 故,理解透彻my.cnf里的参数是 ...

  8. PHP抓取网页内容的几种方法

    方法1: 用file_get_contents 以get方式获取内容 <?php $url='http://www.domain.com/?para=123'; $html = file_get ...

  9. LeetCode Implement strStr()（Sunday算法）

    LeetCode解题之Implement strStr() 原题 实现字符串子串匹配函数strStr(). 假设字符串A是字符串B的子串.则返回A在B中首次出现的地址.否则返回-1. 注意点: - 空 ...

  10. 再谈怎样以最简单的方法将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式

    今天review代码,看见某些大爷在将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式时仍然仅仅顾结果不注重过程,"大爷"咱能负点责任吗? 将泛型为St ...