vue和js中如何实现模糊查询

先来看效果图

这种数据量少的场景适用于前端实现模糊查询
如何实现？

<template><div class="container"><div class="search-bar"><el-input v-model="inputVal" placeholder="请输入图标名称" suffix-icon="el-icon-search" clearable></el-input></div><div class="icon-contain"><div class="icon-item" v-for="item in searchList" :key="item.icon"><i class="icon-style" :class="item.icon"></i><span class="icon-name">{{ item.name }}</span></div></div></div>
</template>

js部分

<script>
export default {data () {return {inputVal: '',list: [], // 全部图标列表}},created() {this.loadData()},computed: {searchList () {....}},methods: {loadData() { // 初始化数据this.list = [{ icon: 'el-icon-delete', name: 'el-icon-delete' },{ icon: 'el-icon-setting', name: 'el-icon-setting' },{ icon: 'el-icon-user', name: 'el-icon-user' },{ icon: 'el-icon-star-off', name: 'el-icon-star-off' },{ icon: 'el-icon-picture-outline', name: 'el-icon-picture-outline' },{ icon: 'el-icon-s-custom', name: 'el-icon-s-custom' },{ icon: 'el-icon-edit', name: 'el-icon-edit' },{ icon: 'el-icon-folder-opened', name: 'el-icon-folder-opened' },{ icon: 'el-icon-chat-dot-round', name: 'el-icon-chat-dot-round' },{ icon: 'el-icon-upload', name: 'el-icon-upload' },{ icon: 'el-icon-message-solid', name: 'el-icon-message-solid' }]},}
}
</script>

我们用 computed 计算属性来动态获得图标列表数据
想要达到的功能是：输入框输入内容，列表框能动态根据输入值显示输入值相关的列表，即模糊查询

方法1：使用 filter() 和 includes() 实现

  computed: {searchList () {if (!this.inputVal) {return this.list}return this.list.filter(item => {return item.name.includes(this.inputVal)})return data}},

方法2：使用 indexOf() 实现，（涉及到英文字母的还是建议处理一下大小写问题）

  computed: {searchList () {if (!this.inputVal) {return this.list}const data = []this.list.forEach(item => {if (item.name.toLowerCase().indexOf(this.inputVal.toLowerCase()) !== -1) {data.push(item)}})return data}},

方法3：使用 test() 正则匹配实现

语法：RegExp.test(string) ，string 要检测的字符串
该方法用于检测一个字符串是否匹配某个模式，如果匹配返回 true ，否则返回 false

  computed: {searchList () {if (!this.inputVal) {return this.list}const data = []const reg = new RegExp(this.inputVal.toLowerCase())this.list.forEach(item => {if (reg.test(item.name.toLowerCase())) {data.push(item)}})return data}},

还有其他的方法，如 split()、match() 等

vue和js中如何实现模糊查询相关推荐

python数据库模糊查询_python中数据库like模糊查询方式
python中数据库like模糊查询方式在Python中%是一个格式化字符,所以如果需要使用%则需要写成%%. 将在Python中执行的sql语句改为: sql = "SELECT * F ...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...
在vue.config.js中配置uglifyjs-webpack-plugin压缩代码
如果vue项目打完包,js文件夹里面只有一个app.js的话,就会在首页加载所有的js代码.如果需要分包打包的话,可以执行以下代码,这样的话每个页面就只会加载对应的js文件,减少首页的负担 1.安装代 ...
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串在public中添加HBuilderX的打包配置文件manifest.json
Vue 项目打包发布移动 App--npm run build打包 & vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuil ...
Springboot项目如何设计接口中敏感字段模糊查询？
目录前言场景分析实现方案环境配置依赖配置代码实现总结前言在<Springboot项目如何设计接口中敏感字段的加密.解密>和<Springboot项目如何设计接口中敏 ...
MYSQL中LIKE（模糊查询）
文章目录 0 写在前面 1 代码格式 2 SQL数据准备 3 举例 3.1格式一:`[NOT] where 字段 LIKE '%' `:表示指代任意内容: 3.2 格式四:[NOT] where 字段 ...
对用户信息的模糊查找java_java中对SQL模糊查询通配符%的处理
在模糊查询的SQL语句中,如果有用户输入查询通配符'%',使用 select * from table where code like '%condition%'的SQL,会查出全部记录,这个如何解决 ...
jdbc中如何实现模糊查询
情况如何再利用jdbc执行sql语句的时候,对于其他的句子的执行没什么太大的问题:加上占位符,然后设置占位符的值. 但是在模糊查询的时候,一直都写不对,这里提供了两种可选的解决办法,以供参考. 解决 ...
java配置接口提供给vue,vue在js中配置全局API接口
在src文件夹中新建util文件夹,然后在新建一个globalAPI.js文件. 在js中配置后端的接口数据 const http = 'http://127.0.0.1:8989' const gl ...

vue和js中如何实现模糊查询

vue和js中如何实现模糊查询相关推荐

最新文章

热门文章