vue练习简单学生信息
时间: 2023-07-01 16:09:35 浏览: 102
你想要练习什么样的学生信息呢?比如学生的姓名、年龄、性别、成绩等等?这里给你一个简单的示例,可以让你练习使用 Vue 来展示学生的基本信息:
HTML 代码:
```
<div id="app">
<table>
<thead>
<tr>
<th>姓名</th>
<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>
<td>{{ student.score }}</td>
</tr>
</tbody>
</table>
</div>
```
JavaScript 代码:
```
new Vue({
el: '#app',
data: {
students: [
{ id: 1, name: '张三', age: 18, gender: '男', score: 90 },
{ id: 2, name: '李四', age: 19, gender: '女', score: 85 },
{ id: 3, name: '王五', age: 20, gender: '男', score: 87 },
{ id: 4, name: '赵六', age: 21, gender: '女', score: 92 },
]
}
})
```
在这个示例中,我们定义了一个名为 `students` 的数组,其中包含了四个学生的基本信息。然后使用 `v-for` 指令来遍历这个数组,将每个学生的信息展示在表格中。