Vue学习：8.v标签综合-强化版

通过前几节的认识和学习，我们掌握了常用v标签的用法，这一节再来巩固提高一下吧。

实例：成绩面板

实现功能：

主体由两大部分组成：表格+表单。这个表格可以显示多科成绩，并具有表头、删除以及底部统计功能。同时，在下方还有一个成绩输入表单，允许用户添加科目成绩，新添加的成绩会实时显示在表格中。

思路：

综合运用不同v标签的使用

代码：

html：

    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- 表格主体部分：使用v-if/else切换不同显示-当表格为空时，显示“暂无数据” -->
            <tbody v-if="list.length > 0">
                <tr v-for="(item, index) in list" :key="item.id">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.name }}</td>
                    <!-- 当成绩低于60分时，触发red类样式 -->
                    <td :class="{red: item.score < 60}">{{ item.score }}</td>
                    <!-- .prevent修饰符，阻止<a>标签的默认跳转行为 -->
                    <td><a @click.prevent="del(item.id)" href="">删除</a></td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="5">暂无数据</td>
                </tr>
            </tbody>
            <footer>
                <tr>
                    <td colspan="5">
                        总分： {{ total }}
                        平均分：{{ mean }}
                    </td>
                </tr>
            </footer>
        </table>

        科目：<input v-model.trim="subject" placeholder="请输入科目">
        <br>
        分数：<input v-model.number="score" placeholder="请输入分数">
        <br>
        <button @click="add()">确认</button>
 </div>

js：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                list:[
                    {id: 1, name: '语文', score: 46},
                    {id: 7, name: '数学', score: 77},
                    {id: 13, name: '英语', score: 85},
                    {id: 14, name: '体育', score: 95},
                ],
                subject: '',
                score: ''
            },
            methods: {
                del(id) {
                    console.log(id)
                    this.list = this.list.filter(item => item.id != id);
                },
                add() {
                    if(this.subject === ''){
                        alert('请输入科目名称！')
                        return
                    }
                    if(this.score > 100 || this.score < 0){
                        alert('请输入0-100内的成绩！')
                        return
                    }
                    // 数组的push()和unshift()都是在原数组的基础上操作
                    this.list.push({
                        id: +new Date(),
                        name: this.subject,
                        score: this.score
                    } )
                }
            },
            computed: {
                total(){
                    return this.list.reduce((sum,item) => sum + item.score, 0)
                },
                mean(){
                    if(this.list.length === 0){
                        return 0
                    }
                    return (this.total/this.list.length).toFixed(2)
                }
            }
        })
 </script>

css：

<style>
        table{
            width: 400px;
            height: 300px;
            border-collapse: collapse;
            margin-bottom: 20px;
            text-align: center;
        }
        th,td{
            border:1px solid black;
        }
        .red{
            color: red;
        }
</style>

注意：

案例中还有很多小的注意，比如：当成绩小于60分时，成绩要高亮显示-这要求使用v-bind动态控制元素的样式；表单元素输入要求去首尾空格、字符转数字-要求使用v-model的修饰符trim和number；当成绩表格为空时要求显示“暂无数据”面板-可以使用v-if/else根据数据长度动态切换显示...