微客导航 » 文章资讯 » vue实现多条件和模糊搜索功能

vue实现多条件和模糊搜索功能

2023-08-22 23:09:06 165

本文实例为大家分享了vue实现多条件和模糊搜索的具体代码，供大家参考，具体内容如下

html





请选择
男
女
不是人






提交数据

{{item.name}}||{{item.phone}}||{{item.sex|filterSex}}

exportdefault{
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){
case1:
return'男';
break;
case2:
return'女';
break;
case3:
return'不是人';
break;
default:
return'男';
}
},
},
computed:{
//realList(){
//let{name,phone,sex}=this.formData;
//if(name&&phone&&sex){
//returnthis.list;
//}
//},
},
created(){
this.search({});
},
methods:{
search({name,phone,sex}){
this.realList=this.list.filter(item=>{
letmatchName=true;//姓名筛选
letmatchSex=true;//性别筛选
letmatchPhone=true;//号码筛选

if(sex){
matchSex=item.sex==sex;
}

if(phone){
//console.info(Object.prototype.toString.call(phone));
matchPhone=item.phone==phone;
}

if(name){
//模糊搜索;
constkeys=name
.toUpperCase()//转大写
.replace('','')//删掉空格
.split('');//切割成单个字

matchName=keys.every(key=>item.name.toUpperCase().includes(key));
}
returnmatchName&&matchPhone&&matchSex;
});
},
},
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue实现多条件和模糊搜索功能

热门推荐

随机推荐