<style>
.score-case {
width: 1000px;
margin: 50px auto;
display: flex;
}
.score-case .table {
flex: 4;
}
.score-case .table table {
width: 100%;
border-spacing: 0;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.score-case .table table th {
background: #f5f5f5;
}
.score-case .table table tr:hover td {
background: #f5f5f5;
}
.score-case .table table td,
.score-case .table table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
padding: 10px;
}
.score-case .table table td.red,
.score-case .table table th.red {
color: red;
}
.score-case .table .none {
height: 100px;
line-height: 100px;
color: #999;
}
.score-case .form {
flex: 1;
padding: 20px;
}
.score-case .form .form-item {
display: flex;
margin-bottom: 20px;
align-items: center;
}
.score-case .form .form-item .label {
width: 60px;
text-align: right;
font-size: 14px;
}
.score-case .form .form-item .input {
flex: 1;
}
.score-case .form .form-item input,
.score-case .form .form-item select {
appearance: none;
outline: none;
border: 1px solid #ccc;
width: 200px;
height: 40px;
box-sizing: border-box;
padding: 10px;
color: #666;
}
.score-case .form .form-item input::placeholder {
color: #666;
}
.score-case .form .form-item .cancel,
.score-case .form .form-item .submit {
appearance: none;
outline: none;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 10px;
margin-right: 10px;
font-size: 12px;
background: #ccc;
}
.score-case .form .form-item .submit {
border-color: #069;
background: #069;
color: #fff;
}
</style>
<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>
<td>{{item.subject}}</td>
<!--<60分的加上red-->
<td :class="{red:item.score<60 }">{{item.score}}</td>
<!--不跳转@click.prevent
<td><a @click.prevent href="http://www.baidu.com">删除</a></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 class="form">
<div class="form-item">
<div class="label">科目:</div>
<div class="input">
<input type="text" placeholder="请输入科目" v-model.trim="subject"></input>
</div>
</div>
<div class="form-item">
<div class="label">分数</div>
<div class="input">
<input type="text" placeholder="请输入分数" v-model.number = "score"></input>
</div>
</div>
<div class="form-item">
<div class="label"></div>
<div class="input">
<button @click="add" class="submit">添加</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list : [
{id : 1,subject : '语文',score : 80},
{id : 2,subject : '数学',score : 50},
{id : 3,subject : '英语',score : 100}
],
subject:'',
score : '',
},
//计算属性
computed:{
totalScore(){
//求总分
return this.list.reduce((sum,item)=>sum+item.score,0)
},
averageScore(){
//求平均分保留小数
if(this.list.length === 0){
return 0;
}
return (this.totalScore / this.list.length).toFixed(2)
}
},
methods:{
del(id){
//根据id删除列表数据
this.list = this.list.filter(item => item.id != id)
},
add(){
if(!this.subject){
alert("请输入科目");
return;
}
if(typeof this.score !== 'number'){
alert("请输入正确的数字");
return;
}
//往前加unshift,往后加push
this.list.unshift({
id : +new Date(),
subject : this.subject,
score : this.score
})
this.subject = '';
this.score = '';
},
}
})
</script>