闲来无事写了个完美的选老婆穿梭框

提示：项目在vue脚手架上跑的

话不多说先上代码：

<template>
  <div>
    <div class="nav"><h1>请选择老婆</h1></div>
    <div class="content">
      <div id="my">
        <!--源-->
        <div class="panel">
          <div class="panel-heading">
              <span class="pull-right">
                <label>
                  <input type="checkbox" v-model="allCheck" @change="allCheckBox"  :disabled="leftData.length == 0">全选
                </label>
              </span>
            <span class="pull-right">{{number(leftData,true)}}/{{leftData.length}}</span>
          </div>
          <div class="panel-body">
            <ul>
              <li class="out" v-for="(v,i) in leftData" :key="i">
                <div class="checkbox">
                  <label>
                    <input class="boot" type="checkbox" v-model="v.check" @change="left">{{v.name}}
                  </label>
                  <img class="img" :src="v.src" alt="">
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--按钮-->
        <div class="text-center">
          <div>
            <button class="btn" :disabled="leftData.length == 0" @click="toright()">>></button>
          </div>
          <div>
            <button class="btn" :disabled="rightData.length == 0" @click="toleft()"><<</button>
          </div>
        </div>
        <!--目标数据-->
        <div class="panel">
          <div class="panel-heading">
                <span class="pull-right">
                <label>
                  <input type="checkbox" @change="checkAllBox" v-model="checkAll" :disabled="rightData.length == 0">全选
                </label>
                </span>
            <span class="pull-right">{{number(rightData,true)}}/{{rightData.length}}</span>
          </div>
          <div class="panel-body">
            <ul>
              <li class="out" v-for="(v,i) in rightData" :key="i">
                <div class="checkbox">
                  <label>
                    <input class="boot" type="checkbox" v-model="v.check" @change="right">{{v.name}}
                  </label>
                  <img class="img" :src="v.src" alt="">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        allCheck: false,
        checkAll: false,
        leftData: [],
        rightData: []
      }
    },
    methods: {
      getFemale() {
        this.axios.get("../../static/getfemale.json").then(resulet => {
          this.leftData = resulet.data.message;
        })
      },
      toright() {
        var selectData = this.getto(this.leftData, true);//获取左边状态为true的数据
        this.rightData.unshift(...selectData);//将获取的数据push到右边去。
        if (this.allCheck) {
          this.allCheck = !this.allCheck;
        }
        this.leftData = this.getto(this.leftData, false);//剔除左边状态为true的数据。
      },
      toleft() {
        var selectData = this.getto(this.rightData, true);//获取右边状态为true的数据
        this.leftData.unshift(...selectData);//将获取的数据push到左边去。
        if (this.checkAll) {
          this.checkAll = !this.checkAll;
        }
        this.rightData = this.getto(this.rightData, false);//剔除右边状态为true的数据。
      },
      allCheckBox() {//左全选
        this.che(this.leftData, this.allCheck)
      },
      checkAllBox() {//右全选
        this.che(this.rightData,this.checkAll)
      },
      left() {//左单选
        // this.all(this.leftData,this.allCheck)
        var m = this.leftData.filter(item=>{
          return item.check == true;
        }).length;
        console.log(m);
        m == this.leftData.length ? this.allCheck = true : this.allCheck = false;
      },
      right() {//右单选
        // this.all(this.rightData,this.checkAll);
        var m = this.rightData.filter(item=>{
          return item.check == true;
        }).length;
        console.log(m);
        m == this.rightData.length ? this.checkAll = true : this.checkAll = false;
      },
      che(data, org) {
        for (let i=0;i<data.length;i++){
          data[i].check = org
        }
      },
      // all(data,org) {
      //   var m = data.filter(item=>{
      //     return item.check == true;
      //   }).length;
      //   console.log(m);
      //   m == data.length ? org = true : org = false;
      // },
      getto(data, state) {//获取data中check状态为state的数据，并返回一个数组。
    this.axios.get("../../static/getfemale.json").then(resulet => {
      data = resulet.data.message;
    });
    return data.filter(item => {
      return item.check == state;
    })
  }
    },
    created() {
      this.getFemale();
    },
    computed: {
      number() {
        return function (data, state) {
          return this.getto(data, state).length;//返回data中为state状态的数组的长度，
        };
      }
    }
  }
</script>

<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
  }

  .nav {
    width: 100%;
    height: 100px;
    background-color: yellowgreen;
    h1{
      color: #fff;
      /*background-image: -webkit-gradient( linear, left top, left bottom,color-stop(0, #F8C63D), color-stop(1, #CC66E7));*/
      /*color: transparent;*/
      /*-webkit-background-clip: text;*/
      /*-ms-background-clip: text;*/
      text-align: center;
      line-height: 100px;
    }
  }

  .content #my {
    margin-top: 30px;
    height: 350px;
    display: flex;
    justify-content: space-between;
    .panel {
      width: 45%;
      .panel-heading {
        width: 100%;
        height: 40px;
        box-shadow: 2px 2px 2px #888888;
        border-radius: 5px;
        background-color: #34a0fc;
        display: flex;
        justify-content: space-between;
        .pull-right {
          display: block;
          text-align: right;
          line-height: 40px;
          color: #fff;
          margin: auto 15px;
        }
      }
      .panel-body {
        height: 300px;
        border: 2px solid rgba(0, 0, 0, .2);
        border-radius: 5px;
        margin-top: 11px;
        overflow-y: scroll;
        .checkbox {
          width: 100%;
          height: 50px;
          padding: 0 5px;
          display: flex;
          justify-content: space-between;
          .boot {
            margin-top: 20px;
            text-align: left;
            line-height: 50px;
          }
          .img {
            display: inline-block;
            width: 38px;
            height: 38px;
            margin-top: 6px;
          }
        }
      }
    }
    .text-center {
      .btn {
        width: 50px;
        font-size: 20px;
        text-align: center;
        background-color: yellowgreen;
        color: #fff;
        margin-top: 110px;
      }
    }
  }

</style>

 

接着是json数据：

{
  "message": [
    {
      "name": "佟丽娅",
      "check": false,
      "src": "./static/getimgs/003 (1).jpg"
    },
    {
      "name": "吴倩",
      "check": false,
      "src": "./static/getimgs/003 (1).jpeg"
    },
    {
      "name": "沈梦辰",
      "check": false,
      "src": "./static/getimgs/003 (14).jpg"
    },
    {
      "name": "邓紫棋",
      "check": false,
      "src": "./static/getimgs/003 (13).jpg"
    },
    {
      "name": "韩雪",
      "check": false,
      "src": "./static/getimgs/003 (12).jpg"
    },
    {
      "name": "李小璐",
      "check": false,
      "src": "./static/getimgs/003 (11).jpg"
    },
    {
      "name": "唐嫣",
      "check": false,
      "src": "./static/getimgs/003 (2).jpg"
    },
    {
      "name": "宋祖儿",
      "check": false,
      "src": "./static/getimgs/003 (3).jpg"
    },
    {
      "name": "章子怡",
      "check": false,
      "src": "./static/getimgs/003 (4).jpg"
    },
    {
      "name": "梁洁",
      "check": false,
      "src": "./static/getimgs/003 (5).jpg"
    },
    {
      "name": "谭松韵",
      "check": false,
      "src": "./static/getimgs/003 (6).jpg"
    },
    {
      "name": "刘亦菲",
      "check": false,
      "src": "./static/getimgs/003 (7).jpg"
    },
    {
      "name": "鞠婧祎",
      "check": false,
      "src": "./static/getimgs/003 (8).jpg"
    },
    {
      "name": "赵丽颖",
      "check": false,
      "src": "./static/getimgs/003 (9).jpg"
    },
    {
      "name": "陈瑶",
      "check": false,
      "src": "./static/getimgs/003 (10).jpg"
    }
  ]
}

效果图：

 

望大佬点评，提问：程序员应不应该有老婆？