選擇新增好友（包含 去重，刪除splice 等） v-show(解決顯示隱藏閃動問題)
阿新 • • 發佈：2018-12-21
<!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>