Vue2中渲染功能，添加功能，删除功能，统计功能

治金的blog

已于 2024-08-01 16:19:53 修改

阅读量277

点赞数 4

文章标签： vue.js 前端 javascript

于 2024-08-01 15:56:14 首次发布

本文链接：https://blog.csdn.net/qq_55111117/article/details/140849314

版权

上述是代码运行结果，完整代码如下

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

            }
        },