打卡学习Vue第四天！！！

综合成绩案例实现效果：

<!--渲染功能：

            1.v-if+v-else:对tbody完成条件渲染；

            2.v-for:对列表完成渲染；

            3.:class:对分数完成渲染

        -->

            <tbody v-if="list.length > 0">
                <tr v-for="(item,index) in list" :key="item.id" align="center">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.subject }}</td>
                    <!--成绩不及格，需标红-->
                    <td :class="{red: item.score < 60}">{{ item.score }}</td>
                    <!--删除功能：
                        注册点击事件->传递id->基于id去过滤掉相同的项
                    -->
                    <td><a href="#" @click="del(item.id)">删除</a></td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="5" align="center">
                        <span class="none">暂无数据</span>
                    </td>
                </tr>
            </tbody>

            <tfoot>
                <tr>
                    <td colspan="4" align="center">
                        总分：<span><strong>{{ totalCount }}</strong></span>
                        平均分：<span><strong>{{ averageSCore }}</strong></span>
                    </td>
                </tr>
            </tfoot>
        </table>
        科目：<input type="text" placeholder="请输入科目名称" v-model.trim="subject"><br>
        分数：<input type="text" placeholder="请输入分数" v-model.number="score"><br>
        <button @click="add">添加</button>

具体实现方法功能（完整代码）：

methods: {
            del(id){
                this.list=this.list.filter(item => item.id !=id)
            },
            add(){
                //判断是否输入正确格式
                if(!this.subject){
                    alert('请输入科目')
                    return
                }
                if(typeof this.score !== 'number'){
                    alert('请输入正确的成绩')
                }
                //添加
                this.list.unshift({//往前面加；往后面加push
                    id: +new Date(),
                    subject: this.subject,
                    score: this.score
                })
                //输完后清空
                this.subject = ''
                this.score = ''
            }
        },
        computed: {
            totalCount(){
                //求和
                let total=this.list.reduce((sum,item) => sum + item.score,0)
                return total
            },
            averageSCore(){
                //判断数据是否为空
                if(this.list.length === 0){
                    return 0
                }
                //求平均数，保留两位小数
                return (this.totalCount / this.list.length).toFixed(2)
            }
        }

*判断输入的内容是否为空

//判断是否输入正确格式
                if(!this.subject){
                    alert('请输入科目')
                    return
                }
                if(typeof this.score !== 'number'){
                    alert('请输入正确的成绩')
                }

*判断输入的数据是否为空？

//判断数据是否为空
                if(this.list.length === 0){
                    return 0
                }