Vue基础案例-成绩显示

最新推荐文章于 2024-03-31 13:56:35 发布
最新推荐文章于 2024-03-31 13:56:35 发布
阅读量2.3k 收藏 18
点赞数 1
分类专栏： 前端学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45387575/article/details/126814850
版权

 成绩排序应该按照降序排

<!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>
</head>

<body>
    <div id="app">搜索：<input type="text" v-model="mincore">~<input type="text" v-model="maxcore"><br> 排名方式：
        <input type="radio" v-model="chose" id="总分" value="总分" @click="choice">总分 <input type="radio" v-model="chose" id="'数学" value="数学" @click="choice">数学 <input type="radio" v-model="chose" id='语文' value="语文" @click="choice">语文 <input type="radio"
            v-model="chose" id="英语" value="英语" @click="choice">英语
        <table>
            <thead>
                <th>排名</th>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
                <th>总分</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in showcore">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.math}}</td>
                    <td>{{item.chinese}}</td>
                    <td>{{item.eng}}</td>
                    <td>{{item.total}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="/demo3_824/js文件/vue.js"></script>
    <script>
        var data = {
            message: [{
                name: '张三',
                math: 97,
                chinese: 89,
                eng: 67
            }, {
                name: '王五',
                math: 72,
                chinese: 55,
                eng: 78
            }, {
                name: '赵茜',
                math: 32,
                chinese: 45,
                eng: 78
            }, {
                name: '孙素',
                math: 45,
                chinese: 67,
                eng: 89
            }],
            mincore: 0,
            maxcore: 300,
            chose: '总分',
            //比较函数
            compare(p) {
                return function(m, n) {
                    var a = m[p]
                    var b = n[p]
                    return a - b
                }
            },
        }
        const app = new Vue({
            el: '#app',
            data: data,
            computed: {
                showcore() {
                    let showcores = []
                    for (let i = 0; i < this.message.length; i++) {
                        total = this.message[i].math + this.message[i].chinese + this.message[i].eng
                        if (total >= this.mincore && total < this.maxcore) {
                            //添加total属性
                            showcores.push(Object.assign(this.message[i], {
                                total: total
                            }))
                        }
                    }
                    //默认排序
                    showcores.sort(this.compare('total'))
                    return showcores
                }
            },
            methods: {
                //排序
                choice(event) {
                    console.log(3);
                    if (event.target.value == '数学') {
                        this.showcore.sort(this.compare('math'))
                    }
                    if (event.target.value == '语文') {
                        this.showcore.sort(this.compare('chinese'))
                    }
                    if (event.target.value == '英语') {
                        this.showcore.sort(this.compare('eng'))
                    }
                    if (event.target.value == '总分') {
                        this.showcore.sort(this.compare('total'))
                    }
                }
            }
        })
    </script>
</body>

</html>

1、给数组中的所有对象追加一个属性

        let arr = []
        let lilst = [{
            name: '小红',
            math: 40,
            en: 89
        }, {
            name: '小红',
            math: 40,
            en: 89
        }]
        lilst.map((item, index) => {
            console.log(item);
            let result = item.math + item.en
            arr.push(Object.assign(item, {
                total: result
            }))
        })
        console.log(arr);

 2、sort方法对对象数组实现排序

sort()方法汇改变原数组，默认按照字符进行排序

也可以选择他的某一顺序进行排序

        let arr = []
        let lilst = [{
            name: '小红',
            math: 80,
            en: 82
        }, {
            name: '小红',
            math: 79,
            en: 89
        }]
        lilst.map((item, index) => {
                console.log(item);
                let result = item.math + item.en
                arr.push(Object.assign(item, {
                    total: result
                }))
            })
            //比较函数
        function compare(p) {
            return function(m, n) {
                var a = m[p]
                var b = n[p]
                return a - b //升序
            }
        }
        arr.sort(compare('math'))
        console.log(lilst, arr);

 3、数组排序

        let arr = [2, 5, 7, 2, 523, 435, 64]

        function compare(a, b) {
            return b - a //降序
        }
        arr.sort((a, b) => {
            return a - b
        })
        console.log(arr);

4、sort按照时间进行排序

        let arr = [{
            "applyId": "1909101016056138768202215",
            "createTime": "2019-09-10 10:16:02",
            "status": 0,
            "userName": "李某某"
        }, {
            "applyId": "1909101027225522012190631",
            "createTime": "2019-09-10 10:07:19",
            "status": 1,
            "userName": "李某某"
        }, {
            "applyId": "1909101027225562448906248",
            "createTime": "2019-09-10 10:27:19",
            "status": 3,
            "userName": "李某某"
        }]


        arr.sort((a, b) => {
            return Date.parse(a.createTime) - Date.parse(b.createTime)
        })
        console.log(arr)

 注意：此时需要将时间转换为时间戳在进行比较

5、input表单标签

type：类型    disabled：表示此表单控件不可用   name：控件的名称，与表单数据一起提交

placeholder：提示用户输入框的格式（与label元素区别） value：空间的初始值

radio单选按钮：如果name一样的话，name这些radio就是一组一组的，只能有一个被选中

如果想多个选中，可以将name换成不同的名字，也可以直接使用复选按钮

//name相同才能实现单选按钮。
 <input type="radio" name="question1" value="boy">男
 <input type="radio" name="question1" value="girl">女
 
//如果用v-model绑定，则无需name参数。
 <input type="radio" v-model="rank" value="total">
 <input type="radio" v-model="rank" value="math">

<!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>
        .active {
            color: orange
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span>搜索：</span><input type="text" v-model="min"><span>~</span><input type="text" v-model="max">
        </div>
        <div>
            <span>排名方式：</span>
            <input type="radio" value="total" v-model="rank">总分
            <input type="radio" value="math" v-model="rank">数学
            <input type="radio" value="chinese" v-model="rank">语文
            <input type="radio" value="english" v-model="rank">英语
        </div>
        <table>
            <thead>
                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>数学</th>
                    <th>语文</th>
                    <th>英语</th>
                    <th>总分</th>
                </tr>
            </thead>
            <!-- 先筛选再排序，遍历排序后的数组 -->
            <tr v-for="(item,index) in sortScoreData" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.math}}</td>
                <td>{{item.chinese}}</td>
                <td>{{item.english}}</td>
                <td>{{oneTotal(item)}}</td>
            </tr>
        </table>
    </div>
    <script src="/demo3_824/js文件/vue.js"></script>
    <script>
        let data = {
            scoresData: [{
                name: '张三',
                math: 97,
                chinese: 89,
                english: 67
            }, {
                name: '李四',
                math: 67,
                chinese: 52,
                english: 98
            }, {
                name: '王五',
                math: 72,
                chinese: 87,
                english: 89
            }, {
                name: '赵钱',
                math: 92,
                chinese: 87,
                english: 59
            }, {
                name: '孙李',
                math: 47,
                chinese: 85,
                english: 92
            }],
            rank: "total", //记录当前用户选择的排序方式
            min: 0,
            max: 300
        }
        const app = new Vue({
            el: '#app',
            data: data,
            computed: {
                oneTotal() {
                    return function(item) {
                        return item.math + item.chinese + item.english
                    }
                },
                //计算数得到筛选后的数组
                filterScoreData() {
                    return this.scoresData.filter(item => {
                        if (this.rank == 'total') {
                            return (this.oneTotal(item)) > this.min && (this.oneTotal(item)) <= this.max
                        }
                        return item[this.rank] >= this.min && item[this.rank] <= this.max
                    })
                },
                //计算属性得到排序后的数组
                sortScoreData() {
                    switch (this.rank) {
                        case 'total':
                            return this.filterScoreData.sort((a, b) => (this.oneTotal(b)) - (this.oneTotal(a)))
                            break;
                        case 'math':
                            return this.filterScoreData.sort((a, b) => b.math - a.math)
                            break;
                        case 'chinese':
                            return this.filterScoreData.sort((a, b) => b.chinese - a.chinese)
                            break;
                        case 'english':
                            return this.filterScoreData.sort((a, b) => b.english - a.english)
                            break;
                    }
                }
            }
        })
    </script>
</body>

</html>

一夕ξ
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue实现可增删查改的成绩单
09-01
主要为大家详细介绍了vue实现可增删查改的成绩单,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现学生信息管理系统
rrrrr44444的博客
05-18 9985
一.页面结构 1、学生信息列表组件 ​ 编辑 添加图片注释，不超过 140 字（可选） 2、添加或修改学生信息组 ​ 编辑 添加图片注释，不超过 140 字（可选） 3、统计信息组件 ​ 编辑 添加图片注释，不超过 140 字（可选） 4、系统日志组件 ​ 编辑 添加图片注释，不超过 140 字（可选） 二、首页 1、显示两个按钮 学生信息列表按钮 和 系统日志列表按钮 2、点击 学生信息列表按钮 显示学生信息列表 且 隐藏 系统日志列表
使用Vue.js制作一个成绩管理系统
最新发布
qq_60597540的博客
03-31 390
在本教程中，我们将使用Vue.js框架来制作一个简单的成绩管理系统。这个系统将允许用户录入学生的成绩，并且能够显示总分和平均分。我们将会使用Vue.js来管理数据和渲染页面，以及利用一些基本的HTML和CSS来构建用户界面。首先，确保你的项目中已经安装了Vue.js。你可以通过以下方式引入Vue.js：</**
SpringCloud整合SpringBoot-综合案例
Eros1onz的博客
12-19 610
1. 使用技术 1.1 后端 SpringCloud+SpringBoot+maven2+web+MySQL+xml+pagehelper+lombok+jwt+ras+BaseResult Eureka 注册中心 + Eureka 客户端
vue成绩单案例
weixin_52113974的博客
12-17 183
Vue成绩单案例
vue.js实现成绩查询、新增、修改
热门推荐
阳光下的木子林的博客
10-17 1万+
vue.js实现成绩查询、新增、修改 原文地址  http://www.cnblogs.com/xwwin/p/5816527.html         vue成绩单             *{             margin:0;             padding:0;         }         .report_card{
vue实现学生成绩管理案例
m0_53951384的博客
10-31 790
实现了学生成绩的管理，可以增加科目成绩，不及格的成绩自动标红，删除成绩，实现总分统计、平均分计算。
Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能
派拉斯兔子的博客
07-18 2005
（一）增加功能 通过本次案例实现添加、删除、显示无数据添加添加思路： ①、获取科目 和 分数 ②、给添加按钮注册点击事件 ③、给list数组添加一个对象 ④、重置表单数据 🍕引入moment 🍕定义格式化的函数 🍕reduce()方法从数组numbers中求和。初始累加器的值为0，回调函数中的累加器accumulator表示当前的总和，currentValue表示数组中的当前元素。在每一次迭代中，回调函数将累加器与当前元素相加，并返回新的累加器的值。最终，reduce()方法返回的就是累
Vue.js实现个人成绩单功能（学期、成绩的展示和总分的计算）
m0_56426418的博客
03-29 1813
Vue.js实现个人成绩单功能（学期、成绩的展示和总分的计算）
使用vue3实现页面学生成绩录入系统
a1357000424的博客
04-27 1342
vue3
Vue之学生成绩案例
hj286251的博客
12-25 169
<a @click.prevent="del(item.id)" href="#">删除</a>
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
vue-okr-tree:http
03-19
更新时间2021/02/04增加showNodeNum属性显示子节点数vue[email protected] 文档和事例 地址： : Vue-Okr-树 基于Vue 2的组织架构树组件 安装 # use npm npm i vue-okr-tree # use yarn yarn add vue-okr-tree 快速...
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
vue-print-nb 兼容低版本浏览器
11-28
vue-print-nb 兼容低版本浏览器 import Print from '@/lib/vue-print-nb/print.umd.min'Vue.use(Print)
详解如何解决Vue和vue-template-compiler版本之间的问题
10-18
主要介绍了详解如何解决Vue和vue-template-compiler版本之间的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用Vue.js实现班级点名小项目
m0_73695308的博客
10-13 186
Vue 应用程序开发
Vue实现学生成绩计算页面
m0_52709447的博客
05-23 797
1.掌握HTML基础知识的应用；2.掌握Vue基本架构的应用；3.掌握函数方法的定义及使用；4.掌握methods方法的使用；5.掌握computed计算属性的使用；6.实现一个学生成绩计算页面。
Vue+Element基础介绍
qq_40658986的博客
07-04 5449
Vue+Element基础介绍
vue的成绩查询案例
06-01
以下是一个简单的 Vue 成绩查询案例： HTML 代码： ```html <div id="app"> <form @submit.prevent="submitForm"> <label for="name">姓名：</label> <input type="text" id="name" v-model="name"> <label for="math">数学：</label> <input type="number" id="math" v-model.number="mathScore"> <label for="english">英语：</label> <input type="number" id="english" v-model.number="englishScore"> <button type="submit">查询</button> </form> <div v-if="showResult"> {{ name }} 的成绩如下：<br> 数学：{{ mathScore }}<br> 英语：{{ englishScore }} </div> </div> ``` JavaScript 代码： ```js new Vue({ el: '#app', data: { name: '', mathScore: 0, englishScore: 0, showResult: false }, methods: { submitForm() { // 在这里发送请求查询成绩 // 假设查询成功并返回以下数据 const data = { mathScore: 90, englishScore: 80 }; this.mathScore = data.mathScore; this.englishScore = data.englishScore; this.showResult = true; } } }); ``` 在这个案例中，我们使用了 Vue 的双向数据绑定功能，同时使用了 `v-if` 来控制是否显示成绩查询结果。在表单提交时，我们假设发送了请求并成功返回了成绩数据，然后在 Vue 实例中更新数据并显示查询结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一夕ξ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值