Vue之学生成绩案例

最新推荐文章于 2024-04-28 20:36:28 发布

hj286251

最新推荐文章于 2024-04-28 20:36:28 发布

阅读量299

点赞数

文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/hj286251/article/details/135192102

版权

需要完成的功能：
1.渲染功能
2.删除功能
3.添加功能
4.统计总分，求平均分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>成绩案例</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div id="root">
<table border="1" width="300" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>科目</th>
<th>成绩</th>
<th>删除</th>
</tr>
</thead>

<tbody align="center" v-if="list.length>0">

<tr v-for="(item,index) in list" :key="item.id">
<td>{{index+1}}</td>
<td>{{item.subject}}</td>

<td :class="{red:item.score<60}">{{item.score}}</td>

<td><a @click.prevent="del(item.id)" href="#">删除</a></td>
</tr>
</tbody>

<tbody align="center" v-else>
<tr>
<td colspan="4">暂无数据</td>
</tr>
</tbody>
<tfoot>
<tr>

<td colspan="2">总分：{{totalPoints}}</td>
<td colspan="2">平均分：{{averageScore}}</td>
</tr>
</tfoot>
</table>
<div>


科目：<input type="text" placeholder="请输入科目" v-model.trim="subjectText"><br>

成绩：<input type="text" placeholder="请输入成绩" v-model.number="scoreText"><br>

<input @click="add" type="button" value="提交">
</div>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
// 我们先存一个数组
list: [
{ id: 1, subject: "语文", score: 60 },
{ id: 2, subject: "数学", score: 55 },
{ id: 3, subject: "英语", score: 90 }
],
subjectText:"",
scoreText:""
},
// 方法
methods: {
del(id){
// 我们使用过滤filter 返回一个新数组新数组覆盖原数组
this.list = this.list.filter(item=>item.id !== id)
},
add(){
// 添加科目不能为空成绩不能为空
if(!this.subjectText){
alert("请输入科目")
return
}else if(!this.scoreText){
alert("请输入成绩")
return
}
//成绩不能是字符串
if(typeof this.scoreText !== "number") {
alert("请输入正确的成绩")
return
}
this.list.push({
// 我们暂时拿时间戳做id
id:+new Date(),
subject:this.subjectText,
score:this.scoreText
})
}
},
computed:{
// 总分
totalPoints(){
// 使用reduce
return this.list.reduce((sum,item)=>item.score + sum,0)
},
// 平均分
averageScore(){
if(this.list.length == 0){
return 0
}
// 保留2位小数
return (this.totalPoints / this.list.length).toFixed(2)
}
}
})
</script>