1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <title></title>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <script src="./js/vue2.js"></script>
  9. </head>
  10.  
  11. <body>
  12. <div id="app">
  13. <ul>
  14. <!-- 先从origin获得对应的数据 -->
  15. <li v-for="(value,index,key) in origin">
  16. {{value.info}}
  17. <!-- 在根据从origin获得的数据遍历对应的对象 -->
  18. <ul>
  19. <li v-for="items in value.project">
  20. {{items}}
  21. </li>
  22. </ul>
  23. </li>
  24. </ul>
  25. </div>
  26. <script>
  27. var vm = new Vue({
  28. el: '#app',
  29. data: {
  30. origin:[
  31. {
  32. info:"all",
  33. "project":{"name":"wikina","age":"20","birthday":"1996"},
  34. },
  35. {
  36. info:"all",
  37. "project":{"name":"wikina","age":"20","birthda":"1996"},
  38. },
  39. {
  40. info:"all",
  41. "project":{"name":"wikina","age":"20","birthda":"1996"},
  42. }
  43. ]
  44.  
  45. }
  46. })
  47. </script>
  48. </body>
  49.  
  50. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <title></title>
  6. <meta charset="UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <script src="./js/vue2.js"></script>
  9. </head>
  10.  
  11. <body>
  12. <div id="app">
  13. <ul>
  14. <!-- 先从origin获得对应的数据 -->
  15. <li v-for="(value,index,key) in origin">
  16. {{value.info}}
  17. <!-- 在根据从origin获得的数据遍历对应的对象 -->
  18. <ul>
  19. <li v-for="items in value.project">
  20. {{items}}
  21. </li>
  22. </ul>
  23. </li>
  24. </ul>
  25. </div>
  26. <script>
  27. var vm = new Vue({
  28. el: '#app',
  29. data: {
  30. origin:[
  31. {
  32. info:"all",
  33. "project":{"name":"wikina","age":"20","birthday":"1996"},
  34. },
  35. {
  36. info:"all",
  37. "project":{"name":"wikina","age":"20","birthda":"1996"},
  38. },
  39. {
  40. info:"all",
  41. "project":{"name":"wikina","age":"20","birthda":"1996"},
  42. }
  43. ]
  44.  
  45. }
  46. })
  47. </script>
  48. </body>
  49.  
  50. </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语句查询数据库所有表和所有字段的详细信息(包括表描述和字段描述)

    select (case then ddd.value else '' end ) as "表名(中文)" --如果表名相同就返回空 , (case then d.name els ...

  2. 天意——thinkphp方法名大小写问题

    今天星期六,晚一小时上班.早起后背了会单词就骑自行车上班了.我是个有豪车梦的男生,每看到什么保时捷啊,雷克萨斯啊开过都会呆呆的看一会.现在虽然我买不上车,但是我可以靠我自己先买一台帅气的大摩托啊哈哈. ...

  3. mini vimrc

    Mini version: set enc=utf-8 ffs=unix,dos,mac lm=zh_CN.utf-8 set nu nowb nocp nowrap ru nobk sm is no ...

  4. LG Gram 2018 z980 白

    因为今年8代处理器i5的双核变成了四核,感觉是个换电脑的好时机,本来打算买macbook,但是6月的发布会并没有发布,于是开始寻找一些比较有特点的笔记本电脑. 了解了这样一款笔记本 LG GRAM 1 ...

  5. Zabbix监控平台部署

    系统环境 Server端:192.168.149.128 Agent端:192.168.149.129 一.lamp环境安装 1.yum安装lamp yum install -y http http- ...

  6. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  7. 手把手教你用vue-cli构建一个简单的路由应用

    上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 开发环境搭建好之后,那么开始新添加一些页面,构建最基本的vue项目, ...

  8. 【CS Round #37 (Div. 2 only) B】Group Split

    [Link]:https://csacademy.com/contest/round-37/task/group-split/ [Description] 让你把一个数分成两个数a.b的和; (a,b ...

  9. LeetCode 258 Add Digits(数字相加,数字根)

    翻译 给定一个非负整型数字,反复相加其全部的数字直到最后的结果仅仅有一位数. 比如: 给定sum = 38,这个过程就像是:3 + 8 = 11.1 + 1 = 2.由于2仅仅有一位数.所以返回它. ...

  10. 什么时候用button,什么时候用a标签

    什么时候用button,什么时候用a标签 一.问题 能实现链接功能的标签一般就a标签,button标签,input submit标签 input submit肯定是提交表单的时候用 那什么时候用but ...