HTML:
<div id="my"> <div class="container"> <div class="row"> <!--源--> <div class="col-sm-5"> <div class="panel panel-default"> <div class="panel-heading clearfix"> <span class="pull-right">{{number(leftData,true)}}/{{leftData.length}}</span> </div> <div class="panel-body"> <ul> <li v-for="(v,i) in leftData" :key="i"> <div class="checkbox"> <label> <input type="checkbox" v-model="v.check">{{v.name}} </label> </div> </li> </ul> </div> </div> </div> <!--按钮--> <div class="col-sm-2 text-center"> <div><button class="btn btn-primary" :disabled="leftData.length == 0" @click="toright()">>></button></div> <div><button class="btn btn-primary" :disabled="rightData.length == 0"><<</button></div> </div> <!--目标数据--> <div class="col-sm-5"> <div class="panel panel-default"> <div class="panel-heading clearfix"> <span class="pull-right">{{number(rightData,true)}}/{{rightData.length}}</span> </div> <div class="panel-body"> <ul> <li v-for="(v,i) in rightData" :key="i"> <div class="checkbox"> <label> <input type="checkbox" v-model="v.check">{{v.name}} </label> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="vue/dist/vue.js"></script>
只为实现简单的功能,CSS暂时没写。
JS:
window.onload = function () { new Vue({ el:'#my', data:{ leftData:[ {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false}, {name:"陈瑶",check:false} ], rightData:[] }, methods:{ toright(){ var selectData = this.getto(this.leftData,true);//获取左边状态为true的数据 this.rightData.push(...selectData);//将获取的数据push到右边去。 this.leftData = this.getto(this.leftData,false);//剔除左边状态为true的数据。 }, getto(data,state){//获取data中check状态为state的数据,并返回一个数组。 return data.filter(item=> { return item.check == state; }) } }, computed:{//计算属性 number(){ return function(data,state){ return this.getto(data,state).length;//返回data中为state状态的数组的长度, }; } } }); };