Vue实现模糊查询搜索功能的步骤详解

更新时间：2023年10月17日 10:23:16 作者：小吴吴吴呀

本文主要介绍了Vue实现模糊查询搜索功能的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

第一步先创建一个val变量

// 用户搜索内容
let val = ref("");

第二步：给input绑定v-model （为了获取input框的值）

  <input v-model="val" type="text" placeholder="请输入行业/公司/名称"/>

第三步：给搜索框加上点击事件

<button @click="onSearch()">搜索</button>

第四步：创建一个全部的数据 arrs

let data = reactive({
  arrs: [],
});

最后一步：用for循环输出

// 模糊查询事件
const onSearch = () => {
  let datas = [];
  for (let i = 0; i < data.arrs.length; i++) {
    data.arrs[i].content = data.arrs[i].content || "";
    data.arrs[i].title = data.arrs[i].title || "";
    if (
      data.arrs[i].content.indexOf(val.value) > -1 ||
      data.arrs[i].title.indexOf(val.value) > -1
    ) {
      datas.push(data.arrs[i]);
    }
  }
  data.goods = datas;
  console.log(data.goods);
  // val.value = "";
};

到此这篇关于Vue实现模糊查询搜索功能的步骤详解的文章就介绍到这了,更多相关Vue实现模糊查询搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue实现悬浮框自由移动+录音功能的示例代码
这篇文章主要为大家详细介绍了如何利用Vue实现悬浮框自由移动+录音功能，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下
2022-07-07
VUE引入腾讯地图并实现轨迹动画的详细步骤
这篇文章主要介绍了VUE引入腾讯地图并实现轨迹动画,引入步骤大概是在 html 中通过引入 script 标签加载API服务，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-09-09
vue组件间的参数传递实例详解
这篇文章主要介绍了vue组件间的参数传递 ,需要的朋友可以参考下
2019-04-04
vue使用Office Web实现线上文件预览
这篇文章主要为大家介绍了vue使用微软的开发接口Office Web,实现线上文件预览,预览word，excel，pptx，pdf文件,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue中插槽整理及用法分析
在本篇文章里小编给大家整理的是一篇关于vue中插槽整理及用法分析内容，对此有兴趣的朋友们可以跟着学习下。
2021-12-12
Vue实现穿梭框效果
这篇文章主要为大家详细介绍了Vue实现穿梭框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vueJs实现DOM加载完之后自动下拉到底部的实例代码
这篇文章主要介绍了vueJs实现DOM加载完成之后自动下拉到底部的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-08-08
Vue退出登录时清空缓存的实现
今天小编就为大家分享一篇Vue退出登录时清空缓存的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Element-UI表格嵌入popover遇到的问题及解决方案
在表格中我们通常需要在每一行的一些单元格中显示popover,这篇文章主要给大家介绍了关于Element-UI表格嵌入popover遇到的问题及解决方案,需要的朋友可以参考下
2023-11-11
vue封装axios与api接口管理的完整步骤
在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以下面这篇文章主要给大家介绍了关于vue封装axios与api接口管理的相关资料,需要的朋友可以参考下
2022-01-01