vue 创建一个成绩录入,展示的表格页面
时间: 2023-11-11 16:01:43 浏览: 48
以下是一个简单的成绩录入展示表格页面的代码示例:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>学生姓名</th>
<th>语文成绩</th>
<th>数学成绩</th>
<th>英语成绩</th>
<th>总分</th>
<th>平均分</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students" :key="index">
<td>{{ student.name }}</td>
<td>
<input type="number" v-model="student.chinese" @change="calculateTotalAndAvg" />
</td>
<td>
<input type="number" v-model="student.math" @change="calculateTotalAndAvg" />
</td>
<td>
<input type="number" v-model="student.english" @change="calculateTotalAndAvg" />
</td>
<td>{{ student.total }}</td>
<td>{{ student.average }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
students: [
{
name: '张三',
chinese: 90,
math: 80,
english: 95,
total: 0,
average: 0,
},
{
name: '李四',
chinese: 85,
math: 75,
english: 90,
total: 0,
average: 0,
},
{
name: '王五',
chinese: 92,
math: 88,
english: 93,
total: 0,
average: 0,
},
],
};
},
methods: {
calculateTotalAndAvg() {
this.students.forEach((student) => {
student.total = student.chinese + student.math + student.english;
student.average = (student.total / 3).toFixed(2);
});
},
},
mounted() {
this.calculateTotalAndAvg();
},
};
</script>
```
说明:
- 在 `data` 中定义了一个 `students` 数组,里面包含了三个学生的信息,包括姓名、语文成绩、数学成绩、英语成绩、总分和平均分;
- 在模板中使用 `v-for` 指令循环遍历 `students` 数组,将学生信息显示在表格中;
- 在每个成绩的输入框中使用 `v-model` 指令绑定对应的学生信息的属性,当输入框的值发生改变时,调用 `@change` 事件触发计算总分和平均分的方法;
- 在 `methods` 中定义了一个 `calculateTotalAndAvg` 方法,用于计算每个学生的总分和平均分;
- 在 `mounted` 生命周期钩子中调用 `calculateTotalAndAvg` 方法,初始化每个学生的总分和平均分。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)