判断循环两兄弟基本是不能少，为了支持当前的循环，我们可以弄个数组。

测试数据网站

https://www.json-generator.com/

模板代码

  1. [
  2.   '{{repeat(5, 7)}}',
  3.   {
  4.     age: '{{integer(20, 40)}}',
  5.     name: '{{firstName()}} {{surname()}}',
  6.     gender: '{{gender()}}',
  7.     company: '{{company().toUpperCase()}}',
  8.     email: '{{email()}}',
  9.     phone: '+1 {{phone()}}',
  10.     address: '{{integer(100, 999)}} {{street()}}, {{city()}}, {{state()}}, {{integer(100, 10000)}}' 
  12.   }
  13. ]

测试数据

  1. [
  2.   {
  3.     "age": 33,
  4.     "name": "Vance Lyons",
  5.     "gender": "male",
  6.     "company": "COMVEY",
  7.     "email": "vancelyons@comvey.com",
  8.     "phone": "+1 (916) 416-2139",
  9.     "address": "916 Vermont Court, Siglerville, Idaho, 9141"
  10.   },
  11.   {
  12.     "age": 26,
  13.     "name": "Rosalind Hamilton",
  14.     "gender": "female",
  15.     "company": "COMVENE",
  16.     "email": "rosalindhamilton@comvene.com",
  17.     "phone": "+1 (989) 488-2329",
  18.     "address": "147 Wallabout Street, Hemlock, Maryland, 2591"
  19.   },
  20.   {
  21.     "age": 33,
  22.     "name": "Greta Blake",
  23.     "gender": "female",
  24.     "company": "DIGITALUS",
  25.     "email": "gretablake@digitalus.com",
  26.     "phone": "+1 (988) 539-3097",
  27.     "address": "226 Denton Place, Chemung, Colorado, 6521"
  28.   },
  29.   {
  30.     "age": 32,
  31.     "name": "Lester Perez",
  32.     "gender": "male",
  33.     "company": "BLURRYBUS",
  34.     "email": "lesterperez@blurrybus.com",
  35.     "phone": "+1 (946) 422-2734",
  36.     "address": "263 Beacon Court, Benson, Oregon, 4107"
  37.   },
  38.   {
  39.     "age": 33,
  40.     "name": "Goldie Gibson",
  41.     "gender": "female",
  42.     "company": "ECOSYS",
  43.     "email": "goldiegibson@ecosys.com",
  44.     "phone": "+1 (822) 479-2602",
  45.     "address": "963 McClancy Place, Escondida, Pennsylvania, 9949"
  46.   },
  47.   {
  48.     "age": 40,
  49.     "name": "Adele Rodriguez",
  50.     "gender": "female",
  51.     "company": "ZYTREK",
  52.     "email": "adelerodriguez@zytrek.com",
  53.     "phone": "+1 (989) 494-3224",
  54.     "address": "350 Calyer Street, Delwood, New Hampshire, 9314"
  55.   },
  56.   {
  57.     "age": 22,
  58.     "name": "Roseann Mcknight",
  59.     "gender": "female",
  60.     "company": "ZAGGLES",
  61.     "email": "roseannmcknight@zaggles.com",
  62.     "phone": "+1 (918) 518-2722",
  63.     "address": "522 Hutchinson Court, Morgandale, South Dakota, 8764"
  64.   }
  65. ]

循环demo

vue使用v-for进行循环，让表格好看点，引入bulma.css。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="../lib/bulma.css">
  7. </head>
  8. <body>
  9. <div id="app"  class="container">
  10.     <table class="table is-bordered is-striped">
  11.         <thead>
  12.             <tr>
  13.                 <th>姓名</th>
  14.                 <th>年龄</th>
  15.                 <th>性别</th>
  16.                 <th>邮箱</th>
  17.                 <th>电话</th>
  18.                 <th>地址</th>
  19.             </tr>
  20.         </thead>
  21.         <tbody>
  22.             <tr v-for="girl in girls">
  23.                 <td>{{girl.name}}</td>
  24.                 <td>{{girl.age}}</td>
  25.                 <td>{{girl.gender}}</td>
  26.                 <td>{{girl.email}}</td>
  27.                 <td>{{girl.phone}}</td>
  28.                 <td>{{girl.address}}</td>
  29.             </tr>
  30.         </tbody>
  31.     </table>
  33. </div>
  35. <script src="../lib/vue.js"></script>
  36. <script>
  38.     var vm = new Vue({
  39.         el:'#app',
  40.         data:{
  41.             girls:[
  42.                 {
  43.                     "age": 33,
  44.                     "name": "Vance Lyons",
  45.                     "gender": "male",
  46.                     "company": "COMVEY",
  47.                     "email": "vancelyons@comvey.com",
  48.                     "phone": "+1 (916) 416-2139",
  49.                     "address": "916 Vermont Court, Siglerville, Idaho, 9141"
  50.                 },
  51.                 {
  52.                     "age": 26,
  53.                     "name": "Rosalind Hamilton",
  54.                     "gender": "female",
  55.                     "company": "COMVENE",
  56.                     "email": "rosalindhamilton@comvene.com",
  57.                     "phone": "+1 (989) 488-2329",
  58.                     "address": "147 Wallabout Street, Hemlock, Maryland, 2591"
  59.                 },
  60.                 {
  61.                     "age": 33,
  62.                     "name": "Greta Blake",
  63.                     "gender": "female",
  64.                     "company": "DIGITALUS",
  65.                     "email": "gretablake@digitalus.com",
  66.                     "phone": "+1 (988) 539-3097",
  67.                     "address": "226 Denton Place, Chemung, Colorado, 6521"
  68.                 },
  69.                 {
  70.                     "age": 32,
  71.                     "name": "Lester Perez",
  72.                     "gender": "male",
  73.                     "company": "BLURRYBUS",
  74.                     "email": "lesterperez@blurrybus.com",
  75.                     "phone": "+1 (946) 422-2734",
  76.                     "address": "263 Beacon Court, Benson, Oregon, 4107"
  77.                 },
  78.                 {
  79.                     "age": 33,
  80.                     "name": "Goldie Gibson",
  81.                     "gender": "female",
  82.                     "company": "ECOSYS",
  83.                     "email": "goldiegibson@ecosys.com",
  84.                     "phone": "+1 (822) 479-2602",
  85.                     "address": "963 McClancy Place, Escondida, Pennsylvania, 9949"
  86.                 },
  87.                 {
  88.                     "age": 40,
  89.                     "name": "Adele Rodriguez",
  90.                     "gender": "female",
  91.                     "company": "ZYTREK",
  92.                     "email": "adelerodriguez@zytrek.com",
  93.                     "phone": "+1 (989) 494-3224",
  94.                     "address": "350 Calyer Street, Delwood, New Hampshire, 9314"
  95.                 },
  96.                 {
  97.                     "age": 22,
  98.                     "name": "Roseann Mcknight",
  99.                     "gender": "female",
  100.                     "company": "ZAGGLES",
  101.                     "email": "roseannmcknight@zaggles.com",
  102.                     "phone": "+1 (918) 518-2722",
  103.                     "address": "522 Hutchinson Court, Morgandale, South Dakota, 8764"
  104.                 }
  105.             ]
  106.         }
  107.     })
  109. </script>
  110. </body>
  111. </html>

效果

image.png

如果在数组当中加入一个对象，就会发生改变了。
对象数据

  1. {
  2.     "age": 29,
  3.     "name": "Lena Grant",
  4.     "gender": "female",
  5.     "company": "ARTIQ",
  6.     "email": "lenagrant@artiq.com",
  7.     "phone": "+1 (857) 416-2646",
  8.     "address": "876 Tehama Street, Blandburg, South Dakota, 5464"
  9.   }

image.png

image.png