vue input搜索功能分享

全部都是亮点:

<template>
    <div>
        <div class="top"><!--搜索框-->
            <van-nav-bar
                    title="搜索"
                    left-text="返回"
                    right-text="按钮"
                    left-arrow
                    @click-left="onClickLeft"
            />
        </div>
        <van-search v-model="value"
                    @search="sea"
                    background="#12A4FF"
                    placeholder="请输入搜索关键词"/>
        <div class="wrap"><!--搜索记录展示-->
            <div v-for="i in data" @click="soo(i)">{{i}}</div>
        </div>
        <div class="goods" v-if="change"><!--搜索商品列表展示-->
            <van-card
                    v-for="i in wys"
                    num="2"
                    :price="i.price"
                    desc="描述信息"
                    :title="i.name"
                    :thumb="i.img"
            />
        </div>
    </div>

</template>

<script>
    export default {
        name: "Search",
        data() {
            return {
                change: false,
                value: "",
                data: JSON.parse(localStorage.getItem('so')) || ['多大', '酸菜鱼', '地方'],
                goods: '',
                wys: [],
                www: false,
            }
        },
        mounted() {
            this.$axios.get('http://localhost:8080/data.json').then(res => {
                this.goods = res.data.data.goods;
            })
        },
        methods: {
            onClickLeft() {
                window.history.back();
            },
            sea(q) {//添加历史搜素
                this.wys = [];
                let ww = this.value;
                let p = this.data.findIndex(item => {
                    return item === this.value
                });

                if (this.data.length < 5) {//判断搜索历史数据条数,以作保留条数
                    this.data.unshift(this.value);
                } else {//在这里进行搜索数据去重,会把曾经搜索过的,再搜索排在第一位,将旧的位置历史删除
                    p === -1 ? this.data.splice(4, 1) : this.data.splice(p, 1);//搜索历史去重
                    this.data.unshift(this.value);//添加历史到首位
                }

                localStorage.so = JSON.stringify(this.data);
                this.change = true;
                document.getElementsByClassName("van-field__control")[0].focus();

                this.goods.map(i => {
                    if (i.name.includes(ww)) {
                        this.wys.push(i);
                    }
                });
            },
            soo(data) {
                let q = false;
                this.value = data;
                document.getElementsByClassName("van-field__control")[0].focus();
                this.sea();
            }
        },
    }
</script>

<style scoped>
    .wrap div {
        margin: 10px 10px;
        border: 1px solid #eee;
        padding: 5px 10px;
    }

    .wrap {
        margin: 10px 0;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

</style>