初学者实现一个简单的穿梭框功能

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状态的数组的长度，
                };
            }
        }
    });
};