vue 模糊搜索

最新推荐文章于 2024-08-12 16:28:19 发布

hammer1010

最新推荐文章于 2024-08-12 16:28:19 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： vue 模糊搜索

本文链接：https://blog.csdn.net/hammer1010/article/details/89742467

版权

前端专栏收录该内容

7 篇文章

订阅专栏

方法一：简单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:
<div id="box">
    <input type="text" v-model="valWord"/>
    <ul>
        <li v-for="value in Search">
            <p>{{value}}</p>
        </li>
    </ul>
</div>

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:
<van-search placeholder="请输入产品追溯码" v-model="value" />   类似于input框
<div class="a-index-r" @click='search'>追溯查询</div>
<div class="loader-m-txt" v-for="(item,index) in list" :key='index'>
    <div class="loader-txt-l">
        <p id="p-header">{{item.crop_name}}</p>
       <p>种植批次号：{{item.plant_batch_no}}</p>
       <p>上市时间：{{item.audit_time}}</p>
       <p>追溯码：{{item.tracing_code}}</p>
    </div>
</div>



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)
            }
        }) ;
    },
}