vue-数据穿插，及代码优化, 记录自己的过往生活！

最新推荐文章于 2024-04-26 17:06:04 发布

梦想缔造者

最新推荐文章于 2024-04-26 17:06:04 发布

阅读量190

点赞数 2

本文链接：https://blog.csdn.net/xztx123/article/details/85236509

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>vue穿梭-->>及es6新语法</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <style>
       #app{
           padding: 60px 0;
       }
       .W10{
           width: 100%;
           height: auto;
           overflow: hidden;
           margin-top: 5px;
           cursor: pointer;
       }
       .W10:hover{
           color: red;
       }
       .row{
           width: 10%;
           height: auto;
           overflow: hidden;
           float:left;
           margin-right: 60px;
       }
       .bule{
           color: blue;
           float: left;
           width: 10%;
           margin-top: 60px;
           margin-right: 60px;
           cursor: pointer;
       }
   </style>
   <body>
       <div id="app">
           <div class="container">
               <div class="row">
                   <div class="W10" v-for="(item,index) in itemL">
                       {{item.id}}
                       <input type="checkbox" v-model="item.check"/>
                       {{item.name}}
                   </div>
               </div>
               <div class="right bule" @click="addRight()"> >> right >> </div>
               <div class="left bule" @click="addLeft()"> << left << </div>
               <div class="row">
                   <div class="W10" v-for="(item,index) in itemR">
                           {{item.id}}
                        <input type="checkbox" v-model="item.check"/>
                       {{item.name}}
                   </div>
               </div>
           </div>
       </div>
   </body>
   <script>
       var app = new Vue({
           el:"#app",
           data:{
               itemL:[
                   {id:1,name:"北京",check:true},
                   {id:2,name:"上海",check:false},
                   {id:3,name:"广州",check:false},
                   {id:4,name:"深圳",check:false},
                   {id:5,name:"杭州",check:false},
                   {id:6,name:"厦门",check:false},
                   {id:7,name:"香港",check:true},
                   {id:8,name:"澳门",check:false}
               ],
               itemR:[],
           },
           methods:{
               addRight:function(v){

//                   优化前代码
//                   var checkL = this.itemL.filter(function(v){
//                       return v.check == true;
//                   })


//                   优化后代码
                   var checkL = this.move(this.itemL,true)

                   this.itemR = this.itemR.concat(checkL);
                   this.itemR= this.sortKey(this.itemR,'id')

//                   优化前代码

//                   this.itemL = this.itemL.filter(function(v){
//                       return v.check == false;
//                   })

// 优化后代码

                   this.itemL = this.move(this.itemL,false);

                   this.itemL= this.sortKey(this.itemL,'id')
               },
               addLeft:function(v){
                   // 优化前代码
//                   var checkR = this.itemR.filter(function(v){
//                       return v.check == true;
//                   })

                   // 优化后代码
                   var checkR = this.move(this.itemR,true);

//                   this.itemL= this.itemL.concat(checkR);

this.itemL =[...this.itemL,...checkR]

                   this.itemL= this.sortKey(this.itemL,'id')

                   // 优化前代码
//                   this.itemR = this.itemR.filter(function(v){
//                       return v.check == false;
//                   })

//                    插入数据,并排序
                   this.itemR = this.move(this.itemR,false);
                   this.itemR= this.sortKey(this.itemR,'id')
               },
               move:function(data,stye){
                   return data.filter(function(v){
                       return v.check == stye;
                   })
               },
               sortKey: function(array,key){
                   return array.sort(function(a,b){
                        var x = a[key];
                        var y = b[key];
                        return ((x<y)?-1:(x>y)?1:0)
               })
                }
       }
    })