選擇添加好友（包含去重，刪除splice 等） v-show(解決顯示隱藏閃動問題)

時間 2019-12-11

標籤選擇添加好友包含刪除 splice 解決顯示隱藏閃動問題简体版

原文原文鏈接

<!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{
 width: 80%;
 margin: 0 auto;
 display: flex;
 }
 #app>ul{
 width: 50%;
 display: inline-block;
 list-style: none;

 }
 #app>ul li:hover{
 color: red;
 cursor: pointer;
 }
 h4{
 width: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(解決顯示隱藏閃動問題)