vue（仿京东）实现搜素功能

最新推荐文章于 2023-05-19 20:31:44 发布

原创

最新推荐文章于 2023-05-19 20:31:44 发布 · 945 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Vue.js中实现应用程序的搜索功能。通过示例代码，展示了如何利用JavaScript进行搜索逻辑的处理，帮助开发者打造类似京东App的搜索体验。

应用场景：

现在很多app都有搜索功能今天我们就用vue实现简单搜索功能：

代码如下：

    <!-- 头部搜索框 -->
  <div class="header">
      <van-search
        v-model.trim="kw"
        show-action
        placeholder="电池"
        shape="round"
        autofocus
        @input="handleInput"
        @keydown.enter="enter"
        @keydown.up="up"
        @keydown.down="down"
      >
        <template #left>
          <van-icon name="arrow-left" />
        </template>
        <template #action>
          <van-button type="danger" size="mini">搜索</van-button>
        </template>
      </van-search>
    </div>

  <!-- 搜索历史 -->
    <div class="search-history">
      <p class="recent">
        <span>最近搜索</span>
        <span>
          <van-icon name="delete" @click="del"></van-icon>
        </span>
      </p>

      <div class="history">
        <div class="history-tag">
          <</