精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
vue怎么实现多条件和模糊搜索功能
这篇文章主要介绍了vue怎么实现多条件和模糊搜索功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了华龙免费建站欢迎大家使用！
html
请选择
男
女
不是人
提交数据
{{item.name}} || {{item.phone}} || {{item.sex | filterSex}}
js
export default {
name: 'styleTest',
data() {
return {
formData: {
name: '',
phone: '',
sex: '',
},
realList: [],
list: [
{
name: '张址',
phone: 18715023011,
sex: 1,
},
{
name: '张三',
phone: 18715023012,
sex: 2,
},
{
name: '李四',
phone: 18715023013,
sex: 1,
},
{
name: '赵武',
phone: 18715023014,
sex: 2,
},
{
name: '晋南',
phone: 18715023015,
sex: 1,
},
{
name: '张东',
phone: 18715023016,
sex: 2,
},
],
};
},
filters: {
filterSex(val) {
switch (val) {
case 1:
return '男';
break;
case 2:
return '女';
break;
case 3:
return '不是人';
break;
default:
return '男';
}
},
},
computed: {
// realList() {
// let { name, phone, sex } = this.formData;
// if (name && phone && sex) {
// return this.list;
// }
// },
},
created() {
this.search({});
},
methods: {
search({ name, phone, sex }) {
this.realList = this.list.filter(item => {
let matchName = true; // 姓名 筛选
let matchSex = true; // 性别 筛选
let matchPhone = true; // 号码 筛选
if (sex) {
matchSex = item.sex == sex;
}
if (phone) {
// console.info(Object.prototype.toString.call(phone));
matchPhone = item.phone == phone;
}
if (name) {
// 模糊搜索;
const keys = name
.toUpperCase() // 转大写
.replace(' ', '') // 删掉空格
.split(''); // 切割成 单个字
matchName = keys.every(key => item.name.toUpperCase().includes(key));
}
return matchName && matchPhone && matchSex;
});
},
},
};感谢你能够认真阅读完这篇文章，希望小编分享的“vue怎么实现多条件和模糊搜索功能”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
文章题目：vue怎么实现多条件和模糊搜索功能
URL网址：http://www.cdkjz.cn/article/johhsd.html
