1_数组对象的排序方法

一，使用 forEach 进行数组排序

复制代码
<body>
    <div id="app">
        <div class="box">
        <div class="todo" v-for="(item,index) in todoList">
            {{item.descName}}-{{item.status}}
        </div>
    </div>
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                todoList:[
                    {
                        descName:"全职高手",
                        status:0
                    },
                    {
                        descName:"全职法师",
                        status:2
                    },
                    {
                        descName:"刺客五六七",
                        status:1
                    },
                    {
                        descName:"全职法师",
                        status:2
                    },
                    {
                        descName:"热血高校",
                        status:0
                    },
                    {
                        descName:"海贼王",
                        status:1
                    },
                ]
            }
        },
        mounted() {
            let flag1 = []  // flag1 flag2 flag3 是由你数组对象需要排序的字段来写的，例如我需要用status来进行排序，由于有 0 1 2 所以我申明了3个变量（flag1，flag2，flag3）
            let flag2 = []  
            let flag3 = []
            this.todoList.forEach(item => {
                console.log(item,"item");   //这个 item 输出的是我 todoList 里面的数组对象数据 会把六个数据单独拿出来
             switch (item.status) {         //使用switch 来进行条件判断 我的排序判断条件是按status来决定的 
                case 0:                     //case 0 ： 是当我的status为 0 的时候
                    flag1.push(item)        //把 所有status是0的 添加到 flag1 这个数组中
                    break;
                case 1:                     //case 1 :  是当我的status为 1 的时候 
                    flag2.push(item)        //把 所有status是1的 添加到 flag2 这个数组中
                    break;
                case 2:                     //case 2 : 是当我的status为 2 的时候
                    flag3.push(item)        //把 所有status是2的 添加到 flag3 这个数组中
                    break;
                default:
                    break;
             }
            });
            this.todoList = [...flag1,...flag2,...flag3]  //然后把这三个数组全都丢个todoList
        
        },
    })
</script>
复制代码

 

二，使用 sort 排序

复制代码
 1 <body>
 2     <div id="app">
 3         <div class="box">
 4         <div class="todo" v-for="(item,index) in todoList">
 5             {{item.descName}}-{{item.status}}
 6         </div>
 7     </div>
 8     </div>
 9 </body>
10 <script>
11     new Vue({
12         el:"#app",
13         data(){
14             return{
15                 todoList:[
16                     {
17                         descName:"全职高手",
18                         status:0
19                     },
20                     {
21                         descName:"全职法师",
22                         status:2
23                     },
24                     {
25                         descName:"刺客五六七",
26                         status:1
27                     },
28                     {
29                         descName:"全职法师",
30                         status:2
31                     },
32                     {
33                         descName:"热血高校",
34                         status:0
35                     },
36                     {
37                         descName:"海贼王",
38                         status:1
39                     },
40                 ]
41             }
42         },
43         mounted() {
44             this.todoList.sort((a,b)=>{    
45                 return a.status - b.status     a-b是升序  b-a 是降序
46             })
47         },
48     })
49 </script>
复制代码

 

posted @   有志青年02  阅读(57)  评论(0)  编辑  收藏  举报
相关博文：
·  2_单独数组去重
·  3_多维数组转一维数组 reduce()
·  举例说明数组的排序方法有哪些？
·  Js中数组的排序方法
·  按时间显示评论
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae