定义一组能存储十个学生信息(学号,姓名,学成绩)的数组,使用vue循环遍历指令显示十个学生的信息。
时间: 2024-02-06 07:11:53 浏览: 26
在 Vue 中,我们可以使用 `v-for` 指令来循环遍历数组,并使用插值语法将每个学生的信息显示在页面上。下面是一个示例代码:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students" :key="index">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.score }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{ id: 1, name: '张三', score: 90 },
{ id: 2, name: '李四', score: 80 },
{ id: 3, name: '王五', score: 70 },
{ id: 4, name: '赵六', score: 60 },
{ id: 5, name: '钱七', score: 50 },
{ id: 6, name: '孙八', score: 40 },
{ id: 7, name: '周九', score: 30 },
{ id: 8, name: '吴十', score: 20 },
{ id: 9, name: '郑一', score: 10 },
{ id: 10, name: '冯二', score: 0 }
]
}
}
}
</script>
```
在上面的代码中,我们定义了一个名为 `students` 的数组,其中存储了十个学生的信息。然后,在模板中使用 `v-for` 指令遍历 `students` 数组,并使用插值语法将每个学生的信息显示在表格中的每一行中。最后,我们使用 `:key` 绑定了每行的唯一标识符,以提高渲染性能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)