vue实现 input模糊搜索 和简单的穿梭框

<template>
  <div class="main">
    <div class="box1">
      <el-input v-model="input" placeholder="请输入内容" size="mini"
       @change="changeValue" @input="inputValue"></el-input>
      <el-checkbox-group
    v-model="checkedCities"
    @change="changeEvent"
    >
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>
    </div>
    <div class="box2">
        <div>已选择数据</div>
      <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}
        <div class="del" @click="delDate(index)">x</div></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      checkedCities: [],
      cities: ['上海a', '北京b', '广州c'],
      list: [],
      newCities: []
    }
  },
  created () {
  // 需要把初始的数据拷贝一份 实现数据的独一性
    this.newCities = JSON.parse(JSON.stringify(this.cities))
  },
  methods: {
    changeValue () {
      console.log(this.input)
    },
    inputValue () {
      const _search = this.input.toLowerCase() // 用于把字符串转为小写
      const newListData = [] // 用于存放搜索出来数据的新数组
      this.newCities.filter(item => {
        if (item.indexOf(_search) !== -1) {
          newListData.push(item)
        }
      })
      this.cities = newListData
      console.log('newCities', this.newCities)
    },
    changeEvent (value) {
      this.list = value
    },
    delDate (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style lang= 'scss' >
.main{
  border: 1px solid #f99;
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
  width: 600px;
  height: 300px;
  .box1{
    border: 1px solid #000;
    width: 45%;
  }
  .box2{
    width: 45%;
    border: 1px solid #000;
    li{
      height: 30px;
      padding:5px 10px;
      margin-bottom: 2px;
      background: #f99;
      .del{
        border: 1px solid #fff;
        float: right;
        font-size: 20px;
      }
    }
  }
}
</style>