• Vue基础案例-成绩显示

     成绩排序应该按照降序排

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <div id="app">搜索：<input type="text" v-model="mincore">~<input type="text" v-model="maxcore"><br> 排名方式：
    13.         <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"
    14.             v-model="chose" id="英语" value="英语" @click="choice">英语
    15.         <table>
    16.             <thead>
    17.                 <th>排名</th>
    18.                 <th>姓名</th>
    19.                 <th>数学</th>
    20.                 <th>语文</th>
    21.                 <th>英语</th>
    22.                 <th>总分</th>
    23.             </thead>
    24.             <tbody>
    25.                 <tr v-for="(item,index) in showcore">
    26.                     <td>{{index+1}}</td>
    27.                     <td>{{item.name}}</td>
    28.                     <td>{{item.math}}</td>
    29.                     <td>{{item.chinese}}</td>
    30.                     <td>{{item.eng}}</td>
    31.                     <td>{{item.total}}</td>
    32.                 </tr>
    33.             </tbody>
    34.         </table>
    35.     </div>
    36.     <script src="/demo3_824/js文件/vue.js"></script>
    37.     <script>
    38.         var data = {
    39.             message: [{
    40.                 name: '张三',
    41.                 math: 97,
    42.                 chinese: 89,
    43.                 eng: 67
    44.             }, {
    45.                 name: '王五',
    46.                 math: 72,
    47.                 chinese: 55,
    48.                 eng: 78
    49.             }, {
    50.                 name: '赵茜',
    51.                 math: 32,
    52.                 chinese: 45,
    53.                 eng: 78
    54.             }, {
    55.                 name: '孙素',
    56.                 math: 45,
    57.                 chinese: 67,
    58.                 eng: 89
    59.             }],
    60.             mincore: 0,
    61.             maxcore: 300,
    62.             chose: '总分',
    63.             //比较函数
    64.             compare(p) {
    65.                 return function(m, n) {
    66.                     var a = m[p]
    67.                     var b = n[p]
    68.                     return a - b
    69.                 }
    70.             },
    71.         }
    72.         const app = new Vue({
    73.             el: '#app',
    74.             data: data,
    75.             computed: {
    76.                 showcore() {
    77.                     let showcores = []
    78.                     for (let i = 0; i < this.message.length; i++) {
    79.                         total = this.message[i].math + this.message[i].chinese + this.message[i].eng
    80.                         if (total >= this.mincore && total < this.maxcore) {
    81.                             //添加total属性
    82.                             showcores.push(Object.assign(this.message[i], {
    83.                                 total: total
    84.                             }))
    85.                         }
    86.                     }
    87.                     //默认排序
    88.                     showcores.sort(this.compare('total'))
    89.                     return showcores
    90.                 }
    91.             },
    92.             methods: {
    93.                 //排序
    94.                 choice(event) {
    95.                     console.log(3);
    96.                     if (event.target.value == '数学') {
    97.                         this.showcore.sort(this.compare('math'))
    98.                     }
    99.                     if (event.target.value == '语文') {
    100.                         this.showcore.sort(this.compare('chinese'))
    101.                     }
    102.                     if (event.target.value == '英语') {
    103.                         this.showcore.sort(this.compare('eng'))
    104.                     }
    105.                     if (event.target.value == '总分') {
    106.                         this.showcore.sort(this.compare('total'))
    107.                     }
    108.                 }
    109.             }
    110.         })
    111.     </script>
    112. </body>
    113.  
    114. </html>

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

    1.         let arr = []
    2.         let lilst = [{
    3.             name: '小红',
    4.             math: 40,
    5.             en: 89
    6.         }, {
    7.             name: '小红',
    8.             math: 40,
    9.             en: 89
    10.         }]
    11.         lilst.map((item, index) => {
    12.             console.log(item);
    13.             let result = item.math + item.en
    14.             arr.push(Object.assign(item, {
    15.                 total: result
    16.             }))
    17.         })
    18.         console.log(arr);

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

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

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

    1.         let arr = []
    2.         let lilst = [{
    3.             name: '小红',
    4.             math: 80,
    5.             en: 82
    6.         }, {
    7.             name: '小红',
    8.             math: 79,
    9.             en: 89
    10.         }]
    11.         lilst.map((item, index) => {
    12.                 console.log(item);
    13.                 let result = item.math + item.en
    14.                 arr.push(Object.assign(item, {
    15.                     total: result
    16.                 }))
    17.             })
    18.             //比较函数
    19.         function compare(p) {
    20.             return function(m, n) {
    21.                 var a = m[p]
    22.                 var b = n[p]
    23.                 return a - b //升序
    24.             }
    25.         }
    26.         arr.sort(compare('math'))
    27.         console.log(lilst, arr);

     3、数组排序

    1.         let arr = [2, 5, 7, 2, 523, 435, 64]
    2.  
    3.         function compare(a, b) {
    4.             return b - a //降序
    5.         }
    6.         arr.sort((a, b) => {
    7.             return a - b
    8.         })
    9.         console.log(arr);

    4、sort按照时间进行排序

    1.         let arr = [{
    2.             "applyId": "1909101016056138768202215",
    3.             "createTime": "2019-09-10 10:16:02",
    4.             "status": 0,
    5.             "userName": "李某某"
    6.         }, {
    7.             "applyId": "1909101027225522012190631",
    8.             "createTime": "2019-09-10 10:07:19",
    9.             "status": 1,
    10.             "userName": "李某某"
    11.         }, {
    12.             "applyId": "1909101027225562448906248",
    13.             "createTime": "2019-09-10 10:27:19",
    14.             "status": 3,
    15.             "userName": "李某某"
    16.         }]
    17.  
    18.  
    19.         arr.sort((a, b) => {
    20.             return Date.parse(a.createTime) - Date.parse(b.createTime)
    21.         })
    22.         console.log(arr)

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

    5、input表单标签

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

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

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

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

    1. //name相同才能实现单选按钮。
    2.  <input type="radio" name="question1" value="boy">男
    3.  <input type="radio" name="question1" value="girl">女
    4.  
    5. //如果用v-model绑定，则无需name参数。
    6.  <input type="radio" v-model="rank" value="total">
    7.  <input type="radio" v-model="rank" value="math">
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         .active {
    11.             color: orange
    12.         }
    13.     </style>
    14. </head>
    15.  
    16. <body>
    17.     <div id="app">
    18.         <div>
    19.             <span>搜索：</span><input type="text" v-model="min"><span>~</span><input type="text" v-model="max">
    20.         </div>
    21.         <div>
    22.             <span>排名方式：</span>
    23.             <input type="radio" value="total" v-model="rank">总分
    24.             <input type="radio" value="math" v-model="rank">数学
    25.             <input type="radio" value="chinese" v-model="rank">语文
    26.             <input type="radio" value="english" v-model="rank">英语
    27.         </div>
    28.         <table>
    29.             <thead>
    30.                 <tr>
    31.                     <th>排名</th>
    32.                     <th>姓名</th>
    33.                     <th>数学</th>
    34.                     <th>语文</th>
    35.                     <th>英语</th>
    36.                     <th>总分</th>
    37.                 </tr>
    38.             </thead>
    39.             <!-- 先筛选再排序，遍历排序后的数组 -->
    40.             <tr v-for="(item,index) in sortScoreData" :key="index">
    41.                 <td>{{index+1}}</td>
    42.                 <td>{{item.name}}</td>
    43.                 <td>{{item.math}}</td>
    44.                 <td>{{item.chinese}}</td>
    45.                 <td>{{item.english}}</td>
    46.                 <td>{{oneTotal(item)}}</td>
    47.             </tr>
    48.         </table>
    49.     </div>
    50.     <script src="/demo3_824/js文件/vue.js"></script>
    51.     <script>
    52.         let data = {
    53.             scoresData: [{
    54.                 name: '张三',
    55.                 math: 97,
    56.                 chinese: 89,
    57.                 english: 67
    58.             }, {
    59.                 name: '李四',
    60.                 math: 67,
    61.                 chinese: 52,
    62.                 english: 98
    63.             }, {
    64.                 name: '王五',
    65.                 math: 72,
    66.                 chinese: 87,
    67.                 english: 89
    68.             }, {
    69.                 name: '赵钱',
    70.                 math: 92,
    71.                 chinese: 87,
    72.                 english: 59
    73.             }, {
    74.                 name: '孙李',
    75.                 math: 47,
    76.                 chinese: 85,
    77.                 english: 92
    78.             }],
    79.             rank: "total", //记录当前用户选择的排序方式
    80.             min: 0,
    81.             max: 300
    82.         }
    83.         const app = new Vue({
    84.             el: '#app',
    85.             data: data,
    86.             computed: {
    87.                 oneTotal() {
    88.                     return function(item) {
    89.                         return item.math + item.chinese + item.english
    90.                     }
    91.                 },
    92.                 //计算数得到筛选后的数组
    93.                 filterScoreData() {
    94.                     return this.scoresData.filter(item => {
    95.                         if (this.rank == 'total') {
    96.                             return (this.oneTotal(item)) > this.min && (this.oneTotal(item)) <= this.max
    97.                         }
    98.                         return item[this.rank] >= this.min && item[this.rank] <= this.max
    99.                     })
    100.                 },
    101.                 //计算属性得到排序后的数组
    102.                 sortScoreData() {
    103.                     switch (this.rank) {
    104.                         case 'total':
    105.                             return this.filterScoreData.sort((a, b) => (this.oneTotal(b)) - (this.oneTotal(a)))
    106.                             break;
    107.                         case 'math':
    108.                             return this.filterScoreData.sort((a, b) => b.math - a.math)
    109.                             break;
    110.                         case 'chinese':
    111.                             return this.filterScoreData.sort((a, b) => b.chinese - a.chinese)
    112.                             break;
    113.                         case 'english':
    114.                             return this.filterScoreData.sort((a, b) => b.english - a.english)
    115.                             break;
    116.                     }
    117.                 }
    118.             }
    119.         })
    120.     </script>
    121. </body>
    122.  
    123. </html>

  • 相关阅读:
    Python应用程序：从Android日志到Excel文件的智能过滤和输出
    开始使用Filebeat
    【Unity3D】拖尾TrailRenderer
    使用 R 构建复杂设计调查加权（Survey-Weighted） Cox 模型的列线图
    Kudu知识点
    SpringCloud 微服务与远程调用测试
    做个清醒的程序员之要不要做程序员
    DoozyUI⭐️二十一、Input：按键输入监听组件
    [免费专栏] ATTACK安全之检测车机中ADB远程调试控制Android系统攻击
    Flink基础概念入门
  • 原文地址：https://blog.csdn.net/qq_45387575/article/details/126814850