vue input输入框关键字筛选检索列表数据展示
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue input输入框关键字筛选检索列表数据展示,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1083字,纯文字阅读大概需要2分钟。
内容图文
想必大家在项目开发中难免会用到关键字筛选的功能,正好这次项目有需求要做这一块,就整理一下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 input输入框关键字筛选检索列表数据展示全部内容,希望文章能够帮你解决vue input输入框关键字筛选检索列表数据展示所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。