思路：
用兩個數組分別記錄左右框框里面的值，用兩個數組綁定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; }
效果如下：
代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>穿梭框</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src='js/vue.js'></script>
<script src='js/index.js'></script>
</head>
<body>
<div id='my'>
<div class="container">
<div class="row">
<!--左側-->
<div class="col-xs-5 col-sm-5" >
<div class="panel panel-success">
<!--標題-->
<div class="panel-heading">
<h3 class="panel-title">列表1<span>2</span></h3>
</div>
<!--內容-->
<div class="panel-body panel-height">
<ul>
<li v-for="(data1,index) in data_left">
<input :value="index" type="checkbox" v-model="check_val_left">
{{data1.name}}
</li>
</ul>
</div>
</div>
</div>
<!--中間-->
<div class="col-xs-2 col-sm-2 transfer">
<div class="transfer-table">
<a class="transfer-cell" @click="left_move()">>></a>
<a class="transfer-cell" @click="right_move()"><<</a>
</div>
</div>
<!--右側-->
<div class="col-xs-5 col-sm-5" >
<div class="panel panel-success">
<!--標題-->
<div class="panel-heading">
<h3 class="panel-title">列表2 <span>2</span></h3>
</div>
<!--內容-->
<div class="panel-body panel-height">
<ul>
<li v-for="(data2,index2) in data_right">
<input :value="index2" type="checkbox" v-model="check_val_right">
{{data2.name}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vue_my=new Vue({
el: '#my',
data: {
data_left: [
{id:1,name:'北京'},
{id:2,name:'上海'},
{id:3,name:'深圳'},
],
data_right: [
{id:11,name:'重慶'},
{id:12,name:'成都'},
{id:13,name:'貴州'},
],
check_val_left:[],
check_val_right:[],
},
methods:{
left_move:function () {
//要把這個數組排序
this.check_val_left.sort(sortNumber);
this.check_val_left.forEach((item,index,array)=>{
//執行代碼
//console.log(item);
//將data_left對應索引的數據移動到右邊去
this.data_right.push(this.data_left[item]);
//console.log(this.data_left);
this.data_left.splice(item, 1);
});
//忘記把這個數組置空了
this.check_val_left=[];
},
right_move:function () {
//console.log(this.check_val_right);
this.check_val_right.sort(sortNumber);
this.check_val_right.forEach((item,index,array)=>{
//執行代碼
//console.log(item);
//將data_left對應索引的數據移動到右邊去
this.data_left.push(this.data_right[item]);
//console.log(this.data_left);
this.data_right.splice(item, 1);
});
this.check_val_right=[];
}
}
})
</script>
<script>
function sortNumber(a, b)
{
return b - a;
}
</script>
</html>