如何使用v-for通过vue.js渲染表

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
    </tr>
  </tbody>
</table>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '张三', age: 20, gender: '男' },
      { id: 2, name: '李四', age: 25, gender: '女' },
      { id: 3, name: '王五', age: 30, gender: '男' }
    ]
  }
});