Vue || Uniapp 模糊查询
2023-12-13 03:58:16
思路 :先请求接口,渲染到data里 ,给input输入框绑定v-model
? ? ? ? ? ? 根据计算属性监听使用filter()方法和includes()进行过滤筛选。
<!-- 输入框 --> <input class="uni-input" placeholder="请输入name或memo查找" @input="handleInput" v-model="keyword" /> <!-- 员工的每一列 --> <view> <view v-for="item in filteredItems"> <span>{{ item.memo }}</span> <span>{{ item.name }}</span> </view> </view> export default { data() { return { // 模糊查询 keyword: '',//输入框value items:[], }; }, // 计算属性监听filteredItems computed: { filteredItems() { if (this.keyword) { return this.items.filter(item => item.name.includes(this.keyword)|| item.memo.includes(this.keyword)|| item.num.toString().includes(this.keyword) ) } else { return this.items; } } }, methods:{ handleInput(event) { console.log(event); this.keyword = event.target.value; console.log(this.items); }, } }
以上是源代码部分 创作不易,觉得有用就点个大拇指+关注吧!? ? ? ?赠人玫瑰,手留余香~? ?
顺便再帮你理一下filter()方法includes()方法
filter()
filter()方法用于把Array中的某些元素过滤掉,然后返回剩下的未被过滤掉的元素。
1、filter() 不会对空数组进行检测;
2、filter() 不会改变原始数组。
实例:
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14)
console.log(newArr);//打印 [17,18,32,33,16,40]
// 查找某个值-------------------------
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num == 14)
console.log(newArr);//打印 [14]
//返回大于某个值和小于某个值的元素
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14 && num < 33)
console.log(newArr);//打印 [17, 18, 32, 16]
includes()
作用:
判断数组是否包含指定的值
判断字符串是否包含指定的子串
包含返回true,不包含返回false , 数组或者字符串都能够使用。
includes(a,b) 括号里第一个参数a为必选参数,表示要查找的某个参数;
第二位b为可选参数,表示从某个索引位置开始查找,默认为零,
若传的参数为负数,则用该数组的长度加上其值:arr.length+(-b)。
const arr = [1, 2, 3]
console.log(arr.includes(2, 3)) // false
console.log(arr.includes(2, 100)) // false
-----------------------华丽的分割线--------------------------------------
const str = 'do not worry be happy'
console.log(str.includes('do')) // true
console.log(str.includes('don')) // false
最后? ? ? ? ..............? 栓Q? ..............
文章来源:https://blog.csdn.net/m0_74238530/article/details/132734500
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!