选择添加好友（包含去重，删除splice 等） v-show(解决显示隐藏闪动问题)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择添加好友</title>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <script src="vue.min.js"></script>
    <style>
        #app{
             80%;
            margin: 0 auto;
            display: flex;
        }
        #app>ul{
             50%;
            display: inline-block;
            list-style: none;

        }
        #app>ul li:hover{
            color: red;
            cursor: pointer;
        }
        h4{
            100% ;
            margin: 0;
            padding: 8px 0;
        }

    </style>
</head>
<body>
    <div id="app" >
         <ul >
             <h4>QQ好友 <span > 总数：{{item.length}}</span></h4>
             <li v-for="(arr,i) in item" @click="sected(arr,i)">{{arr.name}} ({{arr.qq}})</li>
         </ul>
        <ul >
            <h4>选择人数 <span > {{selectItem.length}}</span></h4>
            <li v-for="(select,i) in selectItem" @mouseover="flag=i" @mouseout="flag='hide'">
                {{select.name}} ({{select.qq}})
                
                <!--用v-if时在文档中也不存在会出现闪动导致不能点击删除键 解决方法用v-show 即使页面中不显示仍在存在文档中-->
                <button class="btn-danger" v-show="flag==i"    @click="dell(i)">删除</button>
            </li>
        </ul>
    </div>

    <script>
          window.onload=function(){
              new Vue({
                  el:'#app',
                  data:{
                    flag:'hide',
                    del:'删除',
                    item:[
                        {name:'刘德华1',qq:'6773373',id:'1'},
                        {name:'刘德华2',qq:'8493739',id:'2'},
                        {name:'刘德华3',qq:'9358456',id:'3'},
                        {name:'刘德华4',qq:'2359855',id:'4'},
                        {name:'刘德华5',qq:'1648596',id:'5'}
                    ],
                     selectItem:[]                  },                  methods:{//                      去重（防止一个好友多次选择出现在右边框中）                      sected:function(data){                         var repert= this.selectItem.filter(function(v){//                             把data(item)的id赋值给selectItem的id V可表示为循环过的selectItem(对象数组)                             return v.id==data.id;                          });//                          只有selectItem当前选择项的id在selectItem对象的id已经存在时 repert才不会为空                       //   console.log(repert);                          repert.length>0?'':this.selectItem.push(data)                      },//                      穿入当前索引                      dell:function(i){//                          splice从索引为1处开始删除一个                         this.selectItem.splice(i,1)                      }                  },                  filters:{                  }              })          }    </script></body></html>
选择添加好友（包含 去重，删除splice 等） v-show(解决显示隐藏闪动问题)

选择添加好友（包含去重，删除splice 等） v-show(解决显示隐藏闪动问题)
