vue.js纯js正反排序

最新推荐文章于 2024-03-29 14:19:17 发布

星辰志

最新推荐文章于 2024-03-29 14:19:17 发布

阅读量293

点赞数

本文链接：https://blog.csdn.net/jaquechen/article/details/99651736

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="test">
       <ul v-for="item in items">
           <li>{{item.message}}</li>
           <li>{{item.test}}</li>
       </ul>
       <button @click="test(1)">正序</button>
    </div>
</body>
<script>
    new Vue({
        el:'#test',
        data(){
          return{
              s:true,
            items:[
                {message:12345,test:'立身5'},
                {message:1234,test:'安命4'},
                {message:1,test:'为民1'},
                {message:12,test:'为名2'},
                {message:123,test:'十三例3'}
            ]
          }
        },
       methods: {
        test(s){
            var zhongjian;
            var middle = "";
            if(this.s){
                this.s = !this.s;
            for(var k=0 ; k<this.items.length-1 ; k++){
                for(let i=0;i<this.items.length-1;i++){
                    console.log(this.items[i+1].message)
                        if(this.items[i].message > this.items[i+1].message){
                            console.log("if");
                            zhongjian=this.items[i+1].message;
                            middle = this.items[i+1].test;

                            this.items[i+1].message = this.items[i].message;
                            this.items[i+1].test = this.items[i].test;

                            this.items[i].message = zhongjian;
                            this.items[i].test = middle;

                        }else{
                            console.log("else")
                            middle = this.items[i].test;
                            zhongjian=this.items[i].message;

                            this.items[i+1].message = this.items[i+1].message;
                            this.items[i+1].test = this.items[i+1].test;

                            this.items[i].message = zhongjian;
                            this.items[i].test = middle;
            
                        }
                    }
            }
            }
            else{
                this.s = !this.s;
            for(var k=0 ; k<this.items.length-1 ; k++){
                for(let i=0;i<this.items.length-1;i++){
                    console.log(this.items[i+1].message)
                        if(this.items[i].message < this.items[i+1].message){
                            console.log("if2");
                            zhongjian=this.items[i+1].message;
                            middle = this.items[i+1].test;

                            this.items[i+1].message = this.items[i].message;
                            this.items[i+1].test = this.items[i].test;

                            this.items[i].message = zhongjian;
                            this.items[i].test = middle;

                        }else{
                            console.log("else")
                            zhongjian=this.items[i].message;
                            middle = this.items[i].test;

                            this.items[i+1].message = this.items[i+1].message;
                            this.items[i+1].test = this.items[i+1].test;

                            this.items[i].message = zhongjian;
                            this.items[i].test = middle;
            
                        }
                    }
            }
            }
        },
       }
    })
</script>
</html>

星辰志

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js纯js正反排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫