<!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>