实现效果如下图所示。

html代码块：

<template>
  <div id="Container" style="min-height: 100%; background-color: #fff">
    <searchbox/>
    <!-- 最近搜索 -->
    <div class="history" v-show="show">
      <p class="histText">最近搜索</p>
      <van-image
        class="delIcon"
        :src="require('../../assets/del.png')"
        @click.native="clearHistoryItems"
      />
    </div>
    <div class="hislist">
      <span
        class="hisitem"
        v-for="(item, index) in searchHistoryList"
        :key="index"
        v-show="show"
        @click="onSearch(item)"
        >{
   { item }}</span
      >
    </div>
  </div>
</template>

声明最近搜索的列表：

data() {
    
    return {
    
      // 搜索历史列表，初始化数据
      searchHistoryList: ["自己","可以放一些","搜索数据"],
    };
  },

加载页面后要渲染历史列表：

mounted() {
    
    if (localStorage.historyItems) {
    
      this.searchHistoryList = JSON.parse(localStorage.getItem("historyItems"));
    }
  },

method方法实现：
首先是搜索框的一个搜索操作，每进行一次搜索操作都要进行一次最近搜索的写入。
建议再搜索框的数据模型设为：

<input v-model.trim="msg"> 过滤前后空格

    //search监听事件
   onSearch(val) {
    
      //判断搜索值，空则提示不进行操作
      if (val !== null && val !== "") {
    
        this.appendKeywords(val);
        /**自己的搜索功能实现 */
      } else {
    
        Toast.fail("不可空搜索");
      }
    },

添加最近搜索关键字：
1）已有的关键词，删除原有的关键词，再进行新增操作。
2）新增的关键词，若超出10个则删除最后一个。
3）添加到缓存localstorage中。

appendKeywords(value) {
    
      /**
       * 1.已经有的关键词将历史的删除
       * 2.添加到数组的首位，若超出10个则删除最后一个
       * 3.添加到缓存
       */
      if (
        // 过滤一个结果的空记录添加，如果历史搜索为空则直接添加
        this.searchHistoryList !== null &&
        this.searchHistoryList !== undefined &&
        this.searchHistoryList.length > 0
      ) {
    
          //检查是否有重复值，有则删除
        this.searchHistoryList.forEach((element, index) => {
    
          if (element === value) {
    
            this.searchHistoryList.splice(index, 1);
          }
        });
        // 添加
        // 长度判断
        if (this.searchHistoryList.length >= 10) {
    
          this.searchHistoryList.unshift(value);
          this.searchHistoryList.pop();
        } else {
    
          this.searchHistoryList.unshift(value);
        }
        localStorage.setItem(
          "historyItems",
          JSON.stringify(this.searchHistoryList)
        );
      } else {
    
        this.searchHistoryList = [];
        this.searchHistoryList.push(value);
        localStorage.setItem(
          "historyItems",
          JSON.stringify(this.searchHistoryList)
        );
      }
    },

清除历史记录按钮功能实现：

// 清空历史记录
    clearHistoryItems() {
    
      localStorage.removeItem("historyItems");
      this.searchHistoryList = [];
    },