uniapp & vue列表筛选查询
<div id="app"> <input type="text" v-model="keyword" /> <ul> <li v-for="(item,index) in list" :key="index">{{ item.name}}</li> </ul> </div> <script> data() { return { keyword: '', listOrigin: [ { name: 'test1', area: 'aa' }, { name: 'test2', area: 'bb' }, { name: 'test3', area: 'cc' }, { name: 'test4', area: 'dd' }, { name: 'test5', area: 'ee' }, { name: 'test6', area: 'ff' }, { name: 'test7', area: 'gg' }, { name: 'test8', area: 'hh' } ] }; }, computed: { list() { return this.listOrigin.filter(item => item.name.includes(this.keyword)); } } }) </script>
其他的条件判断表现形式
return number.id < num return number.status == true indexOf(tempFilter[key].toString()) >= 0)
另一个比较完整的筛选
<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> <span>{{item.age}}</span> <span>{{item.title}}</span> </li> </ul> </div> </template> <script> export default { name: "DataForm", data() { return { search:'', list:[ {id:0,name:'AAA',msg:'aaa文本介绍1',title:'水电费',age:366}, {id:1,name:'BBB',msg:'bbb文本介绍2',title:'赵子龙',age:235}, {id:2,name:'CCC',msg:'ccc文本介绍3',title:'赵性',age:587}, {id:3,name:'DDD',msg:'ddd文本介绍4',title:'展飞',age:654}, {id:4,name:'EEE',msg:'eee文本介绍5',title:'收费',age:987}, {id:5,name:'FFF',msg:'Aa文本介绍6',title:'收费',age:6985}, ] }; }, computed:{ // 筛选指定字段 items:function(){ let _search = this.search; let reg = new RegExp(_search, 'ig');// 不区分大小写 if(_search){ return this.list.filter(function(item){ if((item.id.toString().indexOf(_search) != -1) || item.msg.match(reg) || (item.age.toString().indexOf(_search) != -1)){ return item; } }); } return this.list; }, // 筛选所有的字段 itemss: function() { var _search = this.search; console.log(_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; } } }; </script>