vue移动端搜索功能的历史搜索（最近搜索）完整功能实现，重复搜索项会更新在最前面。（利用localstorage）_移动端 vue 搜索记录-程序员宅基地

实现效果如下图所示。
在这里插入图片描述

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 = [];
    },

本文链接：https://blog.csdn.net/weixin_43185419/article/details/119889234

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

获取大于等于一个整数的最小2次幂算法（HashMap#tableSizeFor）_整数最小的2的几次方-程序员宅基地

文章浏览阅读2w次，点赞51次，收藏33次。一、需求给定一个整数，返回大于等于该整数的最小2次幂（2的乘方）。例：输入输出 -1 1 1 1 3 4 9 16 15 16二、分析当遇到这个需求的时候，我们可能会很容易想到一个"笨"办法：..._整数最小的2的几次方

Linux 中 ss 命令的使用实例_ss@,,x,, 0-程序员宅基地

文章浏览阅读865次。选项，以防止命令将 IP 地址解析为主机名。如果只想在命令的输出中显示 unix套接字连接，可以使用。不带任何选项，用来显示已建立连接的所有套接字的列表。如果只想在命令的输出中显示 tcp 连接，可以使用。如果只想在命令的输出中显示 udp 连接，可以使用。如果不想将ip地址解析为主机名称，可以使用。如果要取消命令输出中的标题行，可以使用。如果只想显示被侦听的套接字，可以使用。如果只想显示ipv4侦听的，可以使用。如果只想显示ipv6侦听的，可以使用。_ss@,,x,, 0

conda activate qiuqiu出现不存在activate_commandnotfounderror: 'activate-程序员宅基地

文章浏览阅读568次。CommandNotFoundError: 'activate'_commandnotfounderror: 'activate

Kafka 实战 - Windows10安装Kafka_win10安装部署kafka-程序员宅基地

文章浏览阅读426次，点赞10次，收藏19次。完成以上步骤后，您已在 Windows 10 上成功安装并验证了 Apache Kafka。在生产环境中，通常会将 Kafka 与外部 ZooKeeper 集群配合使用，并考虑配置安全、监控、持久化存储等高级特性。在生产者窗口中输入一些文本消息，然后按 Enter 发送。ZooKeeper 会在新窗口中运行。在另一个命令提示符窗口中，同样切换到 Kafka 的。Kafka 服务器将在新窗口中运行。在新的命令提示符窗口中，切换到 Kafka 的。，应显示已安装的 Java 版本信息。_win10安装部署kafka

【愚公系列】2023年12月 WEBGL专题-缓冲区对象_js 缓冲数据 new float32array-程序员宅基地

文章浏览阅读1.4w次。缓冲区对象（Buffer Object）是在OpenGL中用于存储和管理数据的一种机制。缓冲区对象可以存储各种类型的数据，例如顶点、纹理坐标、颜色等。在渲染过程中，缓冲区对象中存储的数据可以被复制到渲染管线的不同阶段中，例如顶点着色器、几何着色器和片段着色器等，以完成渲染操作。相比传统的CPU访问内存，缓冲区对象的数据存储和管理更加高效，能够提高OpenGL应用的性能表现。_js 缓冲数据 new float32array

四、数学建模之图与网络模型_图论与网络优化数学建模-程序员宅基地

文章浏览阅读912次。（1）图（Graph）：图是数学和计算机科学中的一个抽象概念，它由一组节点（顶点）和连接这些节点的边组成。图可以是有向的（有方向的，边有箭头表示方向）或无向的（没有方向的，边没有箭头表示方向）。图用于表示各种关系，如社交网络、电路、地图、组织结构等。（2）网络（Network）：网络是一个更广泛的概念，可以包括各种不同类型的连接元素，不仅仅是图中的节点和边。网络可以包括节点、边、连接线、路由器、服务器、通信协议等多种组成部分。网络的概念在各个领域都有应用，包括计算机网络、社交网络、电力网络、交通网络等。_图论与网络优化数学建模

随便推点

android 加载布局状态封装_adnroid加载数据转圈封装全屏转圈封装-程序员宅基地

文章浏览阅读1.5k次。我们经常会碰见正在加载中，加载出错， “暂无商品”等一系列的相似的布局，因为我们有很多请求网络数据的页面，我们不可能每一个页面都写几个“正在加载中”等布局吧，这时候将这些状态的布局封装在一起就很有必要了。我们可以将这些封装为一个自定布局，然后每次操作该自定义类的方法就行了。首先一般来说，从服务器拉去数据之前都是“正在加载”页面，加载成功之后“正在加载”页面消失，展示数据；如果加载失败，就展示_adnroid加载数据转圈封装全屏转圈封装

阿里云服务器（Alibaba Cloud Linux 3）安装部署Mysql8-程序员宅基地

文章浏览阅读1.6k次，点赞23次，收藏29次。PS: 如果执行sudo grep 'temporary password' /var/log/mysqld.log 后没有报错，也没有任何结果显示，说明默认密码为空，可以直接进行下一步（后面设置密码时直接填写新密码就行）。3.（可选）当操作系统为Alibaba Cloud Linux 3时，执行如下命令，安装MySQL所需的库文件。下面示例中，将创建新的MySQL账号，用于远程访问MySQL。2.依次运行以下命令，创建远程登录MySQL的账号，并允许远程主机使用该账号访问MySQL。_alibaba cloud linux 3