html 模糊搜索,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;

});

},

},

};

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