在使用uniapp 做首页搜索的功能的时候,要求我们每次搜索关键词,都把关键字置于搜索列表的最前面的位置,并且不展示重复的搜索关键词,这里我们用到 Set 的去重功能下面是代码:
<template>
<view class="content">
<view class="search">
<input type="text" v-model="val" placeholder="输入搜索的内容" />
<button @click="add">添加</button>
</view>
<view class="items">
<view class="item" v-for="(item,index) in searchList" :key="index">
{{item}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
wh: 0,
arr: ["aaa", "bbb", "ccc"], //模拟的数据
val: ''
}
},
onLoad() {
},
methods: {
add() {
const set = new Set(this.arr) //把搜索的列表 转化为
if (!set.has(this.val)) { //如果set对象不存在搜索的关键词
set.add(this.val);
}
this.arr = Array.from(set);
}
},
computed: {
searchList() {
return [...this.arr].reverse();
}
}
}
</script>
<style lang="scss">
.content {
height: 100vh;
background-color: #f6f6f6;
.search {
height: 60rpx;
width: 100%;
display: flex;
button {
width: 200rpx;
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
margin-left: 20rpx;
}
input {
flex: 1;
height: 90%;
font-size: 28rpx;
background: #fff;
padding-left: 10rpx;
}
}
.items {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.item {
width: 120rpx;
height: 60rpx;
font-size: 24rpx;
background-color: #4CD964;
margin-left: 10rpx;
line-height: 60rpx;
text-align: center;
border-radius: 5rpx;
color: #fff;
}
}
}
</style>