功能:搜索之后记录数据,把最后一个显示在第一个
-
data 中的
historyList
不做任何修改,依然使用 push 进行末尾追加 -
定义一个计算属性
historys
,将historyList
数组reverse
反转之后,就是此计算属性的值:
computed: {
historys() {
// 注意:由于数组是引用类型,所以不要直接基于原数组调用 reverse 方法,以免修改原数组中元素的顺序
// 而是应该新建一个内存无关的数组,再进行 reverse 反转
return [...this.historyList].reverse()
}
}
3.页面中渲染搜索关键词的时候,不再使用 data 中的 historyList
,而是使用计算属性 historys
:
<view class="history-list">
<uni-tag :text="item" v-for="(item, i) in historys" :key="i"></uni-tag>
</view>
vue uni-app解决关键词重复的问题,搜索记录功能https://blog.csdn.net/SmartJunTao/article/details/123682087