<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type='text/javascript' src='./js/vue.js'></script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#app {
margin: 20px 25%;
display: flex;
}
.box-one {
width: 300px;
height: 400px;
border: 1px solid #000;
margin-right: 30px;
}
.title-one {
height: 40px;
background-color: skyblue;
line-height: 40px;
text-align: center;
}
.content-one {
overflow-y: scroll;
padding: 10px 30px;
}
.tag-style-active {
display: inline-block;
width: 60px;
height: 30px;
background-color: skyblue;
color: aliceblue;
text-align: center;
line-height: 30px;
border-radius: 3px;
cursor: pointer;
border: 1px solid #000;
margin: 8px;
}
.tag-style {
display: inline-block;
width: 60px;
height: 30px;
background-color: #eee;
color: #000;
text-align: center;
line-height: 30px;
border-radius: 3px;
cursor: pointer;
border: 1px solid #000;
margin: 8px;
padding-right: 9px;
}
.box-two {
width: 300px;
height: 400px;
border: 1px solid #000;
margin-right: 30px;
}
.title-two {
height: 40px;
background-color: skyblue;
line-height: 40px;
text-align: center;
}
.content-two {
overflow-y: scroll;
padding: 10px 30px;
}
.posi {
width: 60px;
display: inline-block;
margin: 5px;
position: relative;
}
.posi .span-x {
position: absolute;
top: 5px;
left: 60px;
cursor: pointer;
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
<div class="box-one">
<div class="title-one">
<!-- 第一种: -->
<!-- 省份 ( {{ leftData.length }} ) / 当前选中( {{ rightData.length }} ) -->
<!-- 第二种: -->
省份 ( {{ leftData.length }} ) / 当前选中( {{ selectedNum }} )
</div>
<div class="content-one">
<span :class="item.flag?'tag-style-active':'tag-style' " v-for='item in leftData' :key="item.id" @click="add(item)">{{ item.name }}</span>
</div>
</div>
<div class="box-two">
<div class="title-two">
已选省份( {{ rightData.length }} )
</div>
<div class="content-one content-two">
<div class="posi" v-for='(item,index) in rightData' :key="item.id">
<span class="span-x" @click="deleteClick(item,index)">x</span>
<span class="tag-style">{{ item.name }}</span>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
leftData: [{
name: "北京市",
id: 1,
flag: false
}, {
name: "上海市",
id: 2,
flag: false
}, {
name: "天津市",
id: 3,
flag: false
}, {
name: "重庆市",
id: 4,
flag: false
}, {
name: '河北省',
id: 5,
flag: false
}, {
name: "山西省",
id: 6,
flag: false
}, {
name: '陕西省',
id: 7,
flag: false
}, {
name: "湖北省",
id: 8,
flag: false
}, {
name: "云南省",
id: 9,
flag: false
}, {
name: "安徽省",
id: 10,
flag: false
}, {
name: "青海省",
id: 11,
flag: false
}, {
name: '江苏省',
id: 12,
flag: false
}, {
name: "浙江省",
id: 13,
flag: false
}, {
name: "山东省",
id: 14,
flag: false
}],
rightData: []
},
methods: {
add(v) {
v.flag = true
// 1.
// for (var i = 0; i < this.rightData.length; i++) {
// if (v.id === this.rightData[i].id) {
// alert("不能重复添加")
// return;
// }
// }
// 2.
var n = this.rightData.filter(i => {
return i.id == v.id
})
if (n.length > 0) return
this.rightData.push(v)
},
// 删除
deleteClick(v, i) {
this.rightData.splice(i, 1)
// 1.
// for (let i = 0; i < this.leftData.length; i++) {
// if (v.id === this.leftData[i].id) {
// this.leftData[i].flag = false
// }
// }
// 2.
// 当右边的删除了,左边的盒子中的标签的颜色也变为普通颜色
this.leftData.forEach(item => {
if (v.id === item.id) {
item.flag = false
}
})
}
},
computed: {
selectedNum() {
console.log(this.leftData.filter(item => item.flag == true), this.leftData.filter(item => item.flag == true).length);
return this.leftData.filter(item => item.flag == true).length
}
}
});
</script>
</body>
</html>
实际效果截图:
image.png
网友评论