上述是代码运行结果，完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
}
.score-case{
width: 500px;
height: auto;
border: 1px solid #000;
}
.table{
width: 100%;
}
.table td, .table th{
border: 1px solid #000;
width: 100px;
padding: 10px;
}
.tfoot{
text-align: center;
}
</style>
</head>
<body>
<div id="app" class="score-case">
<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> <!-- 保证连续性,不用item.id-->
<td>{{item.subject}}</td>
<!-- 不及格的要标红 -->
<!-- 动态控制类 -->
<!-- :class="{属性：条件}"-->
<td :class="{red: item.score < 60}">{{item.score}}</td>
<td><a @click.prevent="del(item.id)" href="">删除</a></td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="5">
<span>暂无数据</span>
</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<td colspan="5">
<span>总分:{{totalScore}}</span>
<span style="margin-left: 50px;">平均分:{{averageScore}}</span>
</td>
</tr>
</tfoot>
</table>
</div>
<!-- 添加功能模块 -->
<div class="form">
<div class="form-item">
<div class="label">科目:</div>
<div class="input">
<input type="text" placeholder="请输入科目" v-model.trim="subject">
</div>
</div>
<div class="form-item">
<div class="label">成绩:</div>
<div class="input">
<input type="text" placeholder="请输入成绩" v-model.number="score">
</div>
</div>
<div class="form-item">
<div class="label"></div>
<div class="input">
<button class="submit" @click="add">添加</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
// 数据
data: {
list: [
{ id: 1, subject: '语文', score: 100 },
{ id: 2, subject: '数学', score: 100 },
{ id: 3, subject: '英语', score: 56 },
{ id: 7, subject: '政治', score: 85 }
],
subject: '',
score: ''
},
methods: {
del(id){
// 删除
this.list = this.list.filter(item => item.id !== id)
},
add(){
// 添加
//条件判断
// trim() 去除字符串前后的空格
if(this.subject.trim() === '' || this.score === '' || typeof this.score !== 'number'){
alert('请输入科目和成绩')
return
}
// push往后面加，unshift往前面加
this.list.push({
id: this.list.length + 1,
subject: this.subject,
score: this.score
})
// 清空输入框
this.subject = ''
this.score = ''
}
},
// 计算属性
computed: {
totalScore(){
// 求和
// reduce() 方法对数组中的每个元素执行一个由您提供的函数，将其结果汇总为单个返回值。
return this.list.reduce((sum,item) => sum + item.score,0)
},
averageScore(){
if(this.list.length === 0){
return 0
}
// toFixed(2) 保留小数点后两位
// 并且toFixed() 是以字符串的形式保留，所以要将它转换为数字
let floatString = this.totalScore / this.list.length.toFixed(2);
let floatNumber = parseFloat(floatString);
return floatNumber;
}
},
})
</script>
</body>
</html>
<!-- 渲染，添加，删除，统计总分 -->渲染功能（v-for="(item,index) in list" :key="item.id"）
- 如果数组长度大于0，则渲染第一个tbody,否则渲染第二个tbody
- 分数不及格的要，把分数渲染成红色。所以要动态控制类 :class="{属性：条件}"
<!-- 渲染操作 -->
<tbody v-if="list.length > 0">
<tr v-for="(item,index) in list" :key="item.id">
<td>{{index+1}}</td> <!-- 保证连续性,不用item.id-->
<td>{{item.subject}}</td>
<!-- 不及格的要标红 -->
<!-- 动态控制类 -->
<!-- :class="{属性：条件}"-->
<td :class="{red: item.score < 60}">{{item.score}}</td>
<td><a @click.prevent="del(item.id)" href="">删除</a></td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="5">
<span>暂无数据</span>
</td>
</tr>
</tbody><script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<script>
const app = new Vue({
el: '#app',
// 数据
data: {
list: [
{ id: 1, subject: '语文', score: 100 },
{ id: 2, subject: '数学', score: 100 },
{ id: 3, subject: '英语', score: 56 },
{ id: 7, subject: '政治', score: 85 }
],
subject: '',
score: ''
},
</script>添加功能(v-model 和 @click="add")
- trim() 去除字符串前后的空格
-
number 转换成数字类型
-
条件判断
-
push() 往数组最后一条后面添加 。 unshift() 往数组第一条数据前面添加
<!-- 添加功能模块 -->
<div class="form">
<div class="form-item">
<div class="label">科目:</div>
<div class="input">
<input type="text" placeholder="请输入科目" v-model.trim="subject">
</div>
</div>
<div class="form-item">
<div class="label">成绩:</div>
<div class="input">
<input type="text" placeholder="请输入成绩" v-model.number="score">
</div>
</div>
<div class="form-item">
<div class="label"></div>
<div class="input">
<button class="submit" @click="add">添加</button>
</div>
</div>
</div> methods: {
add(){
// 添加
//条件判断
// trim() 去除字符串前后的空格
if(this.subject.trim() === '' || this.score === '' || typeof this.score !== 'number'){
alert('请输入科目和成绩')
return
}
// push往后面加，unshift往前面加
this.list.push({
id: this.list.length + 1,
subject: this.subject,
score: this.score
})
// 清空输入框
this.subject = ''
this.score = ''
}
},删除功能（@click.prevent="del(item.id)"， methods:{ del(id) { } }）
-
this.list = this.list.filter(item => item.id !== id)
<tbody v-if="list.length > 0">
<tr v-for="(item,index) in list" :key="item.id">
<td>{{index+1}}</td> <!-- 保证连续性,不用item.id-->
<td>{{item.subject}}</td>
<!-- 不及格的要标红 -->
<!-- 动态控制类 -->
<!-- :class="{属性：条件}"-->
<td :class="{red: item.score < 60}">{{item.score}}</td>
<td><a @click.prevent="del(item.id)" href="">删除</a></td>
</tr>
</tbody> methods: {
del(id){
// 删除
this.list = this.list.filter(item => item.id !== id)
},
}统计求和，求平均分功能 ( 计算属性{{totalScore}} ，{{averageScore}})
- 求和的固定代码 this.list.reduce((sum,item) => sum + item.score,0)
<!-- 表尾 -->
<tfoot>
<tr>
<td colspan="5">
<span>总分:{{totalScore}}</span>
<span style="margin-left: 50px;">平均分:{{averageScore}}</span>
</td>
</tr>
</tfoot>// 计算属性
computed: {
totalScore(){
// 求和
// reduce() 方法对数组中的每个元素执行一个由您提供的函数，将其结果汇总为单个返回值。
return this.list.reduce((sum,item) => sum + item.score,0)
},
averageScore(){
if(this.list.length === 0){
return 0
}
// toFixed(2) 保留小数点后两位
// 并且toFixed() 是以字符串的形式保留，所以要将它转换为数字
let floatString = this.totalScore / this.list.length.toFixed(2);
let floatNumber = parseFloat(floatString);
return floatNumber;
}
},
