1.渲染功能
2.删除功能
3.添加功能
4.统计总分，求平均分
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 500px;/* 设置表格居中 */margin: 0 auto;/*设置单线边框 以下两种方法必须设置在table样式里 *//* border-spacing:0px ; */border-collapse: collapse;float: left;margin-right: 20px;}tr,td,th {/*设置边框线 border：边框线大小 边框线样式 边框线的颜色 */border: 1px solid rgb(2, 2, 2);}th {height: 40px;background-color: rgb(131, 127, 121);}td {height: 80px;/* 设置文本水平居中效果 */text-align: center;/* 设置文本垂直居中效果 */vertical-align: middle;}tr {background-color: rgb(255, 255, 255);}tr:hover {background-color: rgb(110, 110, 110);}.red {color: red;}.submit{margin-top: 20px;margin-left: 53px;}</style>
</head><body><div id="app"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求：不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分：{{ totalScore }}</span><span style="margin-left: 50px">平均分：{{ averageScore }}</span></td></tr></tfoot></table></div>科目：<input type="text" placeholder="请输入科目" v-model.trim="subject" /><br><br>分数：<input type="text" placeholder="请输入分数" v-model.number="score" /><br><br><button @click="add" class="submit">添加</button></div></div><!-- 引入是开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 42 },{ id: 7, subject: '数学', score: 89 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},computed: {totalScore() {return this.list.reduce((sum, item) => sum + item.score, 0)},averageScore() {if (this.list.length === 0) {return 0}//.toFixed(2)：这个方法用于将结果格式化为带有两位小数的字符串。return (this.totalScore / this.list.length).toFixed(2)}},methods: {del(id) {// console.log(id)this.list = this.list.filter(item => item.id !== id)},add() {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}})</script>
</body></html>
