1.在data中定义一个空的数组，这个数组是用来保存从接口中接收到的数据

  AroundList: [], //放搜索列表的数组

2.在页面中渲染， item.tit_con就是查询的关键字

         <div class="keyWord" v-show="cover">
          <div
            class="title"
            @click="Fnsearch(item)"
            v-for="item in AroundList"
            :key="item.id"
          >
            {{ item.tit_con }}
          </div>
        </div>

3.在api中配置接口

//车辆搜索接口
export function searchList(config){
    const params=new URLSearchParams()
    params.append('page',config.page)
    params.append('mod',config.mod)
    return Service({
        url:'/api/oldcar/searchList',
        data:params, 
    })
}

4.在页面中引入接口

import { searchList } from "@/api";

5.并在methods中使用接口，mod分类的关键词就是v-mode绑定的值

    // 接口
    async searchList() {
      return await searchList({ page: this.page, mod: this.val });
    },

6.在input输入框中绑定事件，v-model双向绑定事件传入的值，就是接口mod分类要搜索的关键字， @input="Search"绑定的事件用来监听输入框输入的值

 <input
            type="text"
            placeholder="布加迪威龙"
            @keyup.enter="searchEntInfo"
            v-model="val"
            @input="Search"
          />

7.定义一个防抖事件，用来节约接口多次请求

  time: null, //防抖

8.在inout输入框中定义的监听事件中来执行接口的调用渲染

 async Search() {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(async () => {
        this.AroundList = await this.searchList();
        this.AroundList = this.AroundList.splice(0, 8);
      }, 1000);
    },