vue實現穿梭框效果
一、總結
一句話總結：
用兩個數組分別記錄左右框框里面的值，用兩個數組綁定checkbox，用來記錄選中的checkbox值，根據選中的checkbox的值實現刪除增加即可
1、這里checkbox是綁定的vue的數組數據，所以checkbox的點擊的順序不同的話索引的順序是不同的，這樣刪除數據的時候可能會出錯（比如刪0再刪2的時候，2已經變成了1，沒2了刪就會報錯）？
對這個數組按照從大到小排序，從大到小刪就不會出問題
2、vue實現穿梭框過程中最容易犯的錯誤是什么？
checkbox綁定的數據的數組忘記請空，這樣刪完第一次再刪后面的很容易就出錯了
3、js向數組中添加數據？
數組的push方法：this.data_right.push(this.data_left[item]);
4、js在數組中刪除數據？
數組的splice方法：this.data_left.splice(item, 1);
5、js數組循環？
數組的forEach方法：this.check_val_left.forEach((item,index,array)=>{//執行代碼});
6、js的sort排序？
就是需要寫一個簡單的排序函數，作為參數放到sort函數里面
this.check_val_left.sort(sortNumber); function sortNumber(a, b) { return b - a; }
二、vue實現穿梭框效果
1、效果圖
2、代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>穿梭框</title> 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> 7 <link rel="stylesheet" type="text/css" href="css/index.css"> 8 <script src='js/vue.js'></script> 9 <script src='js/index.js'></script> 10 </head> 11 <body> 12 <div id='my'> 13 <div class="container"> 14 <div class="row"> 15 <!--左側--> 16 <div class="col-xs-5 col-sm-5" > 17 <div class="panel panel-success"> 18 <!--標題--> 19 <div class="panel-heading"> 20 <h3 class="panel-title">列表1<span>2</span></h3> 21 </div> 22 <!--內容--> 23 <div class="panel-body panel-height"> 24 <ul> 25 26 <li v-for="(data1,index) in data_left"> 27 <input :value="index" type="checkbox" v-model="check_val_left"> 28 {{data1.name}} 29 </li> 30 </ul> 31 </div> 32 </div> 33 </div> 34 <!--中間--> 35 <div class="col-xs-2 col-sm-2 transfer"> 36 <div class="transfer-table"> 37 <a class="transfer-cell" @click="left_move()">>></a> 38 <a class="transfer-cell" @click="right_move()"><<</a> 39 </div> 40 41 </div> 42 <!--右側--> 43 <div class="col-xs-5 col-sm-5" > 44 <div class="panel panel-success"> 45 <!--標題--> 46 <div class="panel-heading"> 47 <h3 class="panel-title">列表2 <span>2</span></h3> 48 </div> 49 <!--內容--> 50 <div class="panel-body panel-height"> 51 <ul> 52 <li v-for="(data2,index2) in data_right"> 53 <input :value="index2" type="checkbox" v-model="check_val_right"> 54 {{data2.name}} 55 </li> 56 </ul> 57 </div> 58 </div> 59 </div> 60 </div> 61 </div> 62 </div> 63 </body> 64 65 <script> 66 var vue_my=new Vue({ 67 el: '#my', 68 data: { 69 data_left: [ 70 {id:1,name:'北京'}, 71 {id:2,name:'上海'}, 72 {id:3,name:'深圳'}, 73 ], 74 data_right: [ 75 {id:11,name:'重慶'}, 76 {id:12,name:'成都'}, 77 {id:13,name:'貴州'}, 78 ], 79 check_val_left:[], 80 check_val_right:[], 81 }, 82 methods:{ 83 left_move:function () { 84 //要把這個數組排序 85 this.check_val_left.sort(sortNumber); 86 this.check_val_left.forEach((item,index,array)=>{ 87 //執行代碼 88 //console.log(item); 89 //將data_left對應索引的數據移動到右邊去 90 this.data_right.push(this.data_left[item]); 91 //console.log(this.data_left); 92 this.data_left.splice(item, 1); 93 }); 94 //忘記把這個數組置空了 95 this.check_val_left=[]; 96 }, 97 right_move:function () { 98 //console.log(this.check_val_right); 99 this.check_val_right.sort(sortNumber); 100 this.check_val_right.forEach((item,index,array)=>{ 101 //執行代碼 102 //console.log(item); 103 //將data_left對應索引的數據移動到右邊去 104 this.data_left.push(this.data_right[item]); 105 //console.log(this.data_left); 106 this.data_right.splice(item, 1); 107 }); 108 this.check_val_right=[]; 109 } 110 } 111 }) 112 </script> 113 114 <script> 115 function sortNumber(a, b) 116 { 117 return b - a; 118 } 119 </script> 120 121 </html>