姓名筛选
一、姓名筛选
//index.css
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
#app {
width: 500px;
padding: 10px;;
margin: 30px auto;
}
.control {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.control .search {
display: inline-block;
width: 300px;
height: 25px;
padding-left: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
.control .option {
color: #3e86f4;
font-size: 14px;
margin-left: 10px;
padding: 0 5px;
border-radius: 4px;
cursor: pointer;
}
.control .option.active {
color: #fff;
background-color: #3e86f4;
}
.person {
display: flex;
align-items: center;
padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid #ccc;
}
.avatar {
margin-right: 10px;
vertical-align: middle;
}
.avatar img {
width: 50px;
height: 50px;
}
.content {
display: flex;
flex-direction: column;
}
.content .des {
color: #aaa;
font-size: 10px;
margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app">
<div class="control">
<input type="text" class="search" v-model='filterText'>
<div>
<span class="option" v-for='(option,index) in controlOptions'
:class="{
'active': optionActive[index]}"
@click='filterBySex(index,option)'>{
{ option }}</span>
</div>
</div>
<ul>
<li class="person" v-for='person in personList' :key='person.id'>
<div class="avatar">
<img :src="person.src" :alt="person.des">
</div>
<div class="content">
<span class="name">{
{ person.name }}</span>
<span class="des">{
{ person.des }}</span>
</div>
</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
filterText: '',
controlOptions: ['Male', 'Female', 'All'],
optionActive: [false, false, false],
sex: ['m', 'f'],
personArr: [
{
name: '王港',
src: '****',//图片自己引入
des: '颈椎不好',
sex: 'm',
id: '056482'
},
{
name: '刘莹',
src: '****',
des: '我是谁',
sex: 'f',
id: '157894'
},
{
name: '刘秀莹',
src: '****',
des: '我长得很好看',
sex: 'f',
id: '2849245'
},
{
name: '刘金雷',
src: '****',
des: '你没有见过陌生的脸',
sex: 'm',
id: '348515'
},
{
name: '刘飞翔',
src: '****',
des: '瓜皮刘',
sex: 'm',
id: '478454'
}
]
},
methods: {
filterBySex(index,option) {
if (this.optionActive[index]) {
return;
}
for (var i = 0; i < this.optionActive.length; i++) {
this.optionActive[i] = false
}
this.optionActive.splice(index, 1, true);
this.sex.length = 0;//将数组清空重新等待后面添加值重新渲染
switch (option) {
case 'Male':
this.sex.push('m');
break;
case 'Female':
this.sex.push('f');
break;
case 'All':
this.sex.push('m', 'f');
}
}
},
computed: {
personList() {
const {
personArr, filterText, sex } = this;
return personArr.filter(item => item.name.includes(filterText) && sex.includes(item.sex));
}
}
});
</script>
</body>
</html>
