<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>穿梭框</title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<script src="vue.min.js"></script>
<style>
#app{
80%;
margin: 0 auto;
display: flex;
}
#app>ul{
50%;
display: inline-block;
list-style: none;
}
#app>ul li:hover{
color: red;
cursor: pointer;
}
h4{
100% ;
margin: 0;
padding: 8px 0;
}
span:hover{
color: red;
}
</style>
</head>
<body>
<div class="chuansuo">
<div id="app" >
<ul >
<h4>列表一 <span > 总数：{{itemLeft.length}}</span></h4>
<li v-for="(arr,i) in itemLeft"><input type="checkbox" v-model="arr.check"/>{{arr.name}} </li>
</ul>
<ul >
<h4>列表二 <span > 总数 {{itemRight.length}}</span></h4>
<li v-for="(select,i) in itemRight" >
<input type="checkbox" v-model="select.check"/>
{{select.name}}
</li>
</ul>
</div>
<p class="text-center" style="margin-top: 30px;">
<span style="cursor: pointer " @click="chuansuoL">>> </span>
<span style="cursor: pointer " @click="chuansuoR"> <<</span>
</p>
</div>
<script>
window.onload=function(){
new Vue({
el:'.chuansuo',
data:{
itemLeft:[
{name:'刘德华1',check:false,id:'1'},
{name:'刘德华2',check:true,id:'2'},
{name:'刘德华3',check:false,id:'3'},
{name:'刘德华4',check:false,id:'4'},
{name:'刘德华5',check:false,id:'5'}
],
itemRight:[
]
},
methods:{
// 过滤公共方法(不是过滤器)
addDate:function(item,type){
return item.filter(function(v){
return v.check==type;
});
},
sortId:function(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return x-y
})
},
chuansuoL:function(){
// 利用过滤函数筛选出itemLeft数组里check为true的对象 并导入到右边itemRight数组里
// var add=this.itemLeft.filter(function(v){
// return v.check==true;
// });
var add=this.addDate(this.itemLeft,true);
// 合并数组赋值给itemRight
this.itemRight=this.itemRight.concat(add);
this.sortId(this.itemRight,'id'); /*按id大小排序*/
// 把itemLeft数组里check为false的对象留下来（剩下了）
var shengyu=this.addDate(this.itemLeft,false);
this.itemLeft=shengyu;
},
chuansuoR:function(){
var add=this.addDate(this.itemRight,true);
this.itemLeft=this.itemLeft.concat(add);
this.sortId(this.itemLeft,'id');
var shengyu=this.addDate(this.itemRight,false);
this.itemRight=shengyu; }, }, filters:{ } }) } </script></body></html>
