vue列表渲染

如果需要渲染一组数据，可以使用v-for指令。v-for指令需要一个item in items块来声明迭代那些数据，这里in也可以改为of。如果需要获取迭代的索引的话，可以把迭代块声明为(item, index) in items这样的。另外除了迭代一个列表，也可以迭代一个对象的属性。

<h1>列表渲染</h1>

<div id="s5">

  <h3>名字列表</h3>

  <ul>

    <li v-for="name in names">{{name}}</li>

  </ul>

  <h3>人物表格</h3>

  <table>

    <thead>

    <tr>

      <td>编号</td>

      <td>姓名</td>

      <td>年龄</td>

    </tr>

    </thead>

    <tbody>

    <tr v-for="(person, index) of people" :key="index">

      <td>{{index}}</td>

      <td>{{person.name}}</td>

      <td>{{person.age}}</td>

    </tr>

    </tbody>

  </table>

</div>

<script>

  let vm5 = new Vue({

    el: '#s5',

    data: {

      names: [

        'zhang3',

        'li4',

        'yitian',

        'jojo'

      ],

      people: [

        {name: 'zhang3', age: 24},

        {name: 'li4', age: 25},

        {name: 'yitian', age: 24},

        {name: 'jojo', age: 30}

      ]

    }

  })

</script>