穿梭框

前端代码

<!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>{{itemsL.length}}</span></h3>
                        </div>
                        <!--内容-->
                        <div class="panel-body panel-height">
                            <ul>
                                <li v-for="v in itemsL">
                                    <input type="checkbox" v-model="v.check">
                                    {{v.name}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--中间-->
                <div class="col-xs-2 col-sm-2 transfer">
                    <div class="transfer-table">
                        <a class="transfer-cell" @click="addR()">>></a>
                        <a class="transfer-cell" @click="addL()"><<</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>{{itemsR.length}}</span></h3>
                        </div>
                        <!--内容-->
                        <div class="panel-body panel-height">
                            <ul >
                                <li v-for="v in itemsR">
                                    <input type="checkbox" v-model="v.check">
                                    {{v.name}}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
   </div>
</body>
</html>

脚本

window.onload = function(){
    new Vue({
        el:'#my',
        data:{
            itemsL:[{name:'上海1',check:false},
                    {name:'上海2',check:false},
                    {name:'上海3',check:true},
                    {name:'上海4',check:false},
                    {name:'上海5',check:false},
                    {name:'上海6',check:false},
                    {name:'上海7',check:false},
                    {name:'上海8',check:true},
                    {name:'上海9',check:false}],
            itemsR:[]
        },
        methods:{
            addR:function(){
                //filter  过滤处理  返回数组
                var checkL = this.filterData(this.itemsL,true);
                this.itemsR = [...this.itemsR,...checkL]; //扩展运算符 
                this.itemsL = this.filterData(this.itemsL,false);
            },
             addL:function(){
                //filter  过滤处理  返回数组
                var checkR = this.filterData(this.itemsR,true);
                this.itemsL = [...this.itemsL,...checkR]; //扩展运算符 
                this.itemsR = this.filterData(this.itemsR,false);
            },
            //公共方法
            filterData:function(data,type){
                return data.filter(function(v){
                    return v.check == type;
                });
            }
        }
    })
}

 

posted @ 2020-03-02 15:05  bradleydan  阅读(159)  评论(0)    收藏  举报