vue小demo(穿梭框和全选框)
一个正在努力爱好运动的前端
座右铭:越努力越幸运,越运动越健康,热爱编程,热爱运动。
一、穿梭框(邀请好友)
效果:添加、删除 、鼠标移入显示删除 、移出隐藏
//关键代码
<!--左侧所有好友-->
<div class="col-xs-6 col-sm-6" >
<div class="panel panel-success">
<!--标题-->
<div class="panel-heading">
<h3 class="panel-title">所有好友({{items.length}})</h3>
</div>
<!--内容-->
<div class="panel-body panel-height">
<ul>
<li v-for="(v,i) in items" ::key="i" @click="addItem(v)">
<span class="glyphicon glyphicon-fire photo"></span>{{v.name}}({{v.qq}})
</li>
</ul>
</div>
</div>
</div>
<!--右侧选择联系人-->
<div class="col-xs-6 col-sm-6" >
<div class="panel panel-success">
<!--标题-->
<div class="panel-heading">
<h3 class="panel-title">已选择联系人({{selectedItems.length}})</h3>
</div>
<!--内容-->
<div class="panel-body panel-height">
<ul >
<li v-for="(v,i) in selectedItems" :key="i" @mouseover="flag=i" @mouseout="flag='hide'">
<span class="glyphicon glyphicon-fire photo"></span>{{v.name}}({{v.qq}})
<span class="glyphicon glyphicon-trash del" @click="delItem(i)" v-show="flag == i"></span>
</li>
</ul>
</div>
</div>
window.onload = function () {
var vm = new Vue({
el: '#my',
data: {
//左边数据
items: [{ name: '陈奕迅', id: 1, qq: '12345678', state: false },
{ name: '李荣浩', id: 2, qq: '12345678', state: false },
{ name: '毛不易', id: 3, qq: '12345678', state: false },
{ name: '简弘亦', id: 4, qq: '24325324364', state: false },
{ name: '于文文', id: 5, qq: '242424', state: false },
{ name: '火简少女101', id: 6, qq: '2324324324', state: false },
{ name: 'TFBOYS', id: 7, qq: '54523242', state: false },
{ name: 'BEYOND', id: 8, qq: '23435346', state: false },
{ name: '华晨宇', id: 9, qq: '4242342534', state: false },
{ name: 'BIGBANG', id: 10, qq: '4322432423', state: false },
{ name: 'DAISHI DANCE', id: 11, qq: '243432432', state: false },
{ name: '李哈哈', id: 12, qq: '3244322432', state: false },
{ name: '周笔畅', id: 13, qq: '5352324532', state: false },
{ name: '张碧晨', id: 14, qq: '4324324324224', state: false },
{ name: '广东雨神', id: 15, qq: '4324324324', state: false }],
selectedItems: [], //右边数组
flag:'hide' //默认隐藏
},
methods: {
//添加
addItem: function (v) {
//{name:v.name,id:v.id,qq:v.qq,state:v.state
this.selectedItems.push(v);
//去重 使用... + new Set
this.selectedItems = [...new Set(this.selectedItems)];
},
//删除
delItem: function (index) {
//splice
// this.selectedItems.splice(index, 1);
//filter
this.selectedItems = this.selectedItems.filter((item, i) => i != index);
}
},
})
}
效果图
二、全选框
效果:全选与多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>用户列表checkbox选项操作(全选)</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src='js/vue.js'></script>
<script src='js/index.js'></script>
</head>
<body>
<div id='demo'>
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox" v-model="checkAll" @change="checkAllItem()">
</th>
<th>用户姓名</th>
<th>用户性别</th>
<th>所在城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in items" :key="i">
<th><input type="checkbox" v-model="v.state" @change="checkItem()"></th>
<td>{{v.name}}</td>
<td>{{v.sex}}</td>
<td>{{v.city}}</td>
<td><button disabled="true">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
window.onload = function () {
var vm = new Vue({
el: '#demo',
data: {
items: [
{name:'张三1',sex:'男',city:'北京1',state:true},
{name:'张三2',sex:'女',city:'北京2',state:false},
{name:'张三3',sex:'男',city:'北京3',state:false},
{name:'张三4',sex:'男',city:'北京4',state:false},
{name:'张三5',sex:'女',city:'北京5',state:false},
{name:'张三6',sex:'男',city:'北京6',state:false},
{name:'张三7',sex:'男',city:'北京7',state:true},
],
checkAll: false, //全选的状态
},
methods: {
// 全选
checkAllItem: function () {
//打全选选中时 ,全部state为true 不选中时 全部state为flase
//也就是说全选的状态等于他们的状态
this.items.forEach((v) => {
v.state = this.checkAll;
});
},
//多选
checkItem: function () {
//当全部选中时 全选打√ //没有全部选中时 不打√
//也就是当全部状态为true时的长度 = items.length时 全选打√
var n = this.items.filter(item=>item.state).length;
console.log(n);
n==this.items.length? this.checkAll = true:this.checkAll = false;
//2.every()检测数组元素是否都符合要求,都符合返回true,只要有一个没有符合返回false
// this.checkAll = this.items.every(item=>item.state);
}
},
})
}
效果图