用vue实现学生列表

以下是一个简单的示例，用Vue实现一个学生列表：

HTML部分：

<div id="app">
  <h1>学生列表</h1>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="student in students" :key="student.id">
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.gender }}</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript部分：

var app = new Vue({
  el: '#app',
  data: {
    students: [
      { id: 1, name: '张三', age: 18, gender: '男' },
      { id: 2, name: '李四', age: 19, gender: '女' },
      { id: 3, name: '王五', age: 20, gender: '男' },
      { id: 4, name: '赵六', age: 21, gender: '女' }
    ]
  }
});

这里使用了Vue的数据驱动功能，将学生列表数据存储在Vue实例的data对象中，然后在HTML中使用v-for指令来循环渲染每个学生的信息。其中，:key="student.id"是用来指定每个学生的唯一标识的，以便Vue能够高效地跟踪每个学生的变化。