vue模仿支付宝的应用管理进行应用增减

使用的是vant UI库，一开始因为badge的动态赋值就想了好久哈哈，不过也一步一步做出来了。感兴趣就跟我一起看看吧！

页面布局上面板块是“我的应用”，下面的板块是“所有应用”，点击上面应用的小徽标将其在下面的小徽标改为“+”，并且在上面把他删除掉；点击下面的带有“+”的小徽标的icon时，将其添加到上面并且将“+”的徽标省略。

下面是代码的实现：

页面的基本布局

---我的应用---
<van-grid class="grid"  :border="false">
    <van-grid-item class="gutter" badge="-"  v-for="icon in iconListMy" :key="icon.key" :icon="icon.src" :text="icon.value" @click="iconClickMy(icon)" >
    </van-grid-item>
</van-grid>
---下面总的应用---
//小徽标给了个动态值
<van-grid class="grid"  :border="false">
   <van-grid-item class="gutter" :badge="icon.state?'':'+'" v-for="icon in iconList" :key="icon.key" :icon="icon.src" :text="icon.value" @click="buttonClick(icon)" >
   </van-grid-item>
</van-grid>

---配置iconlist---
iconListMy: [
        {key: 'aa', value:'应用1', state:false, src:require('')},
        {key: 'bb', value:'应用2',state:false, src:require('')},
        {key: 'cc', value:'应用3',state:false, src:require('')},
        {key: 'dd', value:'应用4',state:1, src:require('')},...
],
iconList: [
        {key: 'aa', value:'应用1', state:true, src:require('')},
        {key: 'bb', value:'应用2',state:true, src:require('')},
        {key: 'cc', value:'应用3',state:true, src:require('')},
        {key: 'dd', value:'应用4',state:1, src:require('')},...
],

先看点击上面的方法：

//点击事件
//点击上面的进行上面应用的减法
    iconClickMy(e){
      for (var i = 0; i < this.iconListMy.length; i++) {
        if( this.iconListMy[i].key === e.key){
          this.iconListMy.splice(i,1)
          break;
        }
      }
//下面的小徽标由无变为“+”
      for (var j = 0; j < this.iconList.length; j++) {
        if(this.iconList[j].key === e.key ) {
          this.iconList[j].state = false
          break;
        }
      }
    },

上面的做完后，点击下面的也很轻松地完成了，要注意：若上面的应用为空的话，就进不去写的循环里面所以应该做个判断，若为空就直接push。因为我这个是数组中套对象的形式，查找数组中是否包含某个key值相等的值，用find方法很好用，find是真的很强大！

下面的代码实现：

//点击下面的
//下面的状态更改就可以了
    buttonClick(e){
      for (var i = 0; i < this.iconList.length; i++) {
        if( this.iconList[i].key === e.key){
          this.iconList[i].state = true
          break;
        }
      }
//上面的list进行变动
      if(this.iconListMy.length !== 0){
        for (var j = 0; j < this.iconListMy.length; j++) {
            if( this.iconListMy.find(v => v.key === e.key)) {
              console.log('存在')
              break;
            } else{
              console.log(this.iconList.find(v => v.key === e.key))
              console.log('不存在');
              this.iconListMy.push(this.iconList.find(v => v.key === e.key))
              break;
            }
          }
      }else{
        this.iconListMy.push(this.iconList.find(v => v.key === e.key))
      }
    }

基本功能就实现了，之后应该会涉及到和后端进行交互存储，到时候再更新吧！（感觉做完这个还是很有成就感的）