vue实现删除，渲染，求值功能

<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>