vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码。下面直接上代码:
html:
<!-- 筛选demo --> <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list数组 --> <li v-for="(item,index) in items"> <span>{{item.name}}</span> <span>{{item.msg}}</span> </li> </ul> </div> </template>
匹配(所有||单个)字段 > js:
export default { data () { return { search:'', list:[ {name:'AAA',msg:'aaa文本介绍1'}, {name:'BBB',msg:'bbb文本介绍2'}, {name:'CCC',msg:'ccc文本介绍3'}, {name:'DDD',msg:'ddd文本介绍4'}, {name:'EEE',msg:'eee文本介绍5'}, ] } }, computed: { //过滤方法 items: function() { var _search = this.search; if (_search) { //不区分大小写处理 var reg = new RegExp(_search, 'ig') //es6 filter过滤匹配,有则返回当前,无则返回所有 return this.list.filter(function(e) { //匹配所有字段 return Object.keys(e).some(function(key) { return e[key].match(reg); }) //匹配某个字段 // return e.name.match(reg); }) }; return this.list; } }, }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue实现搜索结果高亮显示关键字
本文实例为大家分享了Vue实现搜索结果高亮显示关键字的具体代码,供大家参考,具体内容如下 1. 需要解决的问题 父组件将搜索的字段传到子组件 子组件接受数据,正则匹配,并替换字段 2. 具体代码 父组件代码 <template> <div> <div v-if="showMe"> <div class="re_search"> <svg @click="$router.go(-1)">
-
vue+elementUI实现表格关键字筛选高亮
本文实例为大家分享了vue elementUI表格关键字筛选高亮的具体代码,供大家参考,具体内容如下 代码: <template> <div class=""> <div class="top"> <!-- 筛选 --> <div class="screen"> <div style="width:30%">筛选:</div> <el-i
-
基于vue实现多引擎搜索及关键字提示
本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码,供大家参考,具体内容如下 关键代码: <div class="header-search"> <form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix" autocomp
-
vue2实现搜索结果中的搜索关键字高亮的代码
具体代码如下所示: // 筛选变色 brightenKeyword(val, keyword) { val = val + ''; if (val.indexOf(keyword) !== -1 && keyword !== '') { return val.replace(keyword, '<font color="#409EFF">' + keyword + '</font>') } else { return val } } // 或者用
-
vue input输入框关键字筛选检索列表数据展示
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下vue的input输入框输入关键字检索数据列表的代码.下面直接上代码: html: <!-- 筛选demo --> <template> <div> <input type="text" v-model="search"> <ul> <!-- 注意!注意!注意!这里循环遍历的是items,不再是data里的list
-
Vue 实现分页与输入框关键字筛选功能
分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 <template> <div class="sales-table"> <div class="order-list-header">订单列表</div> <div class="back-box"> <div class="search-box">&l
-
解决Vue input输入框卡死的问题
原因 我把 vuex 全局变量 $store.state.search.key 绑定到 v-model 上,然后在页面挂载时通过代码修改 $store.state.search.key 的值,最后在页面上输入任意值 input 框就卡住了 解决方法 1.input 标签增加 @input 属性 <input v-model='$store.state.search.key' @input="forceUpdateInput"> 2.methods 中增加对应方法 force
-
vue input输入框模糊查询的示例代码
Vue 模糊查询功能 原理:原生js的search() 方法,用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串.如果没有找到任何匹配的子串,则返回 -1. input输入框,模糊查询 <template> <div> <input type="text" placeholder="请输入..." v-model="searchVal"> <ul> <li v-for=&quo
-
vue实现Input输入框模糊查询方法
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search
-
Vue3 列表界面数据展示详情
目录 一.列表界面展示示例 2.进行数据显示 2.1.组件在列表显示 2.2.接口返回数据在列表显示 2.3.接口数据改造 2.4.list列表一行显示为多条数据 2.5.列表内容前图标样式修改 一.列表界面展示示例 现在要做的就是把打到页面的数据,带样式,也就是说好看点显示. 之前我们在<Vue3(二)集成Ant Design Vue>这篇文章中,有提及组件的使用,对于一个前端不是很好(后端也不咋的),本着拿来主义,我们能现成的是最好.最省事的方式了. 直白点说就是,找Ant Design
-
解决vue项目input输入框双向绑定数据不实时生效问题
我就废话不多说了,大家还是直接看代码吧~ <input type="text" maxlength="11" placeholder="请输入联系人电话" v-model="form.phone" /> 这样的输入框,绑定的是data中的form对象上的phone字段. 在mounted钩子函数里边写: this.form.phone = '1888888888'; 这样在页面上时候不会随着输入框值改变而改变. 解
-
Vue支持搜索与筛选的用户列表实现流程介绍
目录 1. 常规风格的示例工程开发 2. 使用组合式API重构用户列表页面 3. 优化用户列表页面 1. 常规风格的示例工程开发 首先新建一个名为 normal.html 的测试文件,在HTML文件的head标签中引入Vue框架并设置常规的模板字段如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
-
vue实现前台列表数据过滤搜索、分页效果
本文实例为大家分享了vue实现列表数据过滤搜索.分页效果的具体代码,供大家参考,具体内容如下 job.vue页面 <style lang="scss"> .job-wrapper { padding-top: 50px; } .job-left { float: left; margin-right: 20px; padding: 20px; width: 310px; background: #fff; } .job-serach-title { margin: 8px
随机推荐
- java、js中实现无限层级的树形结构方法(类似递归)
- java教程之java继承示例详解
- 自制微信公众号一键排版工具
- ASP.NET MVC 中实现基于角色的权限控制的处理方法
- python中随机函数random用法实例
- js跨域请求数据的3种常用的方法
- js实现横向百叶窗效果网页切换动画效果的方法
- php若干单维数组遍历方法的比较
- javaweb中静态文件的常用处理方法汇总
- 诺顿防病毒软件 Norton Antivirus v2007+KeyGen下载
- oracle常用数据类型说明
- jQuery实现购物车多物品数量的加减+总价计算
- JS溶解形式的文字切换特效
- 深入解析C++中的动态类型转换与静态类型转换运算符
- String类型传递是值传递,char[]类型传递是引用传递的实现
- Python中join函数简单代码示例
- jQuery ajax+PHP实现的级联下拉列表框功能示例
- 搞懂Java线程池
- 详解linux下nohup日志输出过大问题解决方案
- Linux文件权限与群组修改命令详解