vueJs2.0穿梭框实现

首先简介一下穿梭狂的含义:点击左边的商品就会进入右边的已选商品列表,同时也可以点击右边的商品删除已经选择的商品;

主要代码如下:

<template>
  <div class="hello">
    <div class="one">
      <p v-for="msg in message" @click="clickP(msg)">{{msg.name}}</p>
    </div>
    <div class="two">
      <p v-for="data in newdatas" @click="deleteP(data)">{{data.name}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: '哈哈',
        hh: '呵呵',
        message: [
          {id: 1, name: '第一个'},
          {id: 2, name: '第二个'},
        ],
        datas: [],
        newdatas: []
      }
    },
    mounted: function () {

    },
    methods: {
      clickP: function (msg) {
        this.datas.push(msg)
        this.newdatas = this.unique(this.datas)
      },
      deleteP: function (data) {
        for( let i=0;i<this.newdatas.length;i++){
          console.log('输出');
          console.log(this.newdatas[i]);
          if(this.newdatas[i].id==data.id){
            this.newdatas.splice(i,1);
            this.datas.splice(0,this.datas.length);
          }
        }
      },
      // 除重
      unique: function (a) {
        let res = []
        for (let i = 0, len = a.length; i < len; i++) {
          let item = a[i];
          (res.indexOf(item) === -1) && res.push(item)
        }
        return res
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello {
    display: flex;
    justify-content: center;
  }

  .one, .two {
    width: 300px;
    height: 400px;
    outline: 1px solid red;
  }

</style>

VueJS2.0  QQ交流群:424882195,欢迎大家加入互相学习交流!

我个人微信公众号:欢迎大家关注下:

名称:U世界的V梦想

二维码: