vue 模糊搜索

方法一：简单demo实现

    用到es5=>filter() 过滤     
 

var arr = [11, 12, 13, 14, 15, 16];
var brr = arr.filter(function (val) {
    return val%2 == 0;  //遍历数组，返回值为true保留并复制到新数组，false则过滤掉
});
console.log(brr);  //[12, 14, 16]

    es6=> includes( ) 方法:用来判断一个 数组/字符串 是否包含一个指定的值，如果是返回 true，不是返回false。

var arr = [1,2,3,4];
console.log(arr.includes(3))  //true
 

html:

    
    

        

            
{{value}}
        
    

js:
var vm = new Vue({
    el : '#box',  //确定根元素
    data : {
        valWord : '',
        list : ['锤子', '锤你', '锤他', '锤不锤', '锤死他']
    },
    computed : {  //设置计算属性
        Search(){
            if(this.valWord){
                return this.list.filter((value)=>{  //过滤数组元素
                    return value.includes(this.valWord); //如果包含字符返回true
                });
            }
        }
    }
});

方法二：vue点击模糊搜索

html:
   类似于input框
追溯查询

    

        
{{item.crop_name}}
       
种植批次号：{{item.plant_batch_no}}
       
上市时间：{{item.audit_time}}
       
追溯码：{{item.tracing_code}}
    




js：
data() {
    return{
        value:'',
        list:[]
    }
},
created() {
    this.cropType()
},

methods: {
    // 获取施肥类型
    cropType(){
        ajaxApi.TraceQuery.TQsearch({"page":"1","size":"6"}).then(res => {
            console.log(res)
            if(res.code == 0){
                this.list = res.data.list;
            }else {
                this.$message.error(res.msg)
            }
        });
    },


    //搜索查询（methods方法里面写）
    search() {
        let params = {
            page: 1,
            size: 6,
            tracing_code: this.value,                 
        }
        ajaxApi.TraceQuery.TQsearch(params).then(res => {  //路径接口
            if(res.code == 0){
                this.list = res.data.list;
            }else {
                this.$message.error(res.msg)
            }
        }) ;
    },
}

 

 

路径接口自己配，或直接调用自己项目接口
ojbk  这样就能能实现模糊搜索功能！！！