写一段vue代码,表格中有一例会自动计算每位学生的总成绩。
时间: 2024-02-22 21:56:45 浏览: 32
好的,以下是一个示例代码,表格中有一列会自动计算每位学生的总成绩。
HTML 代码:
```
<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.id }}</td>
<td>{{ student.name }}</td>
<td><input type="number" v-model="student.chinese" /></td>
<td><input type="number" v-model="student.math" /></td>
<td><input type="number" v-model="student.english" /></td>
<td>{{ getTotalScore(student) }}</td>
</tr>
</tbody>
</table>
```
Vue.js 代码:
```
<script>
export default {
data() {
return {
students: [
{ id: 1, name: '张三', chinese: 80, math: 90, english: 85 },
{ id: 2, name: '李四', chinese: 75, math: 85, english: 90 },
{ id: 3, name: '王五', chinese: 90, math: 80, english: 80 },
],
};
},
methods: {
getTotalScore(student) {
return student.chinese + student.math + student.english;
},
},
};
</script>
```
在这个示例中,我们使用 v-for 指令循环遍历学生信息数组,通过 v-model 指令实现双向数据绑定,将每个学生的语文、数学、英语成绩与组件的数据进行绑定。在表格中添加一列,使用 getTotalScore 方法计算每个学生的总成绩。在方法中,我们通过传入当前学生对象,计算出每个学生的总成绩并返回。最终,表格中会自动计算每位学生的总成绩。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)