vue input输入框实时搜索

最新推荐文章于 2023-10-20 19:13:13 发布

昨夜太平长安888

最新推荐文章于 2023-10-20 19:13:13 发布

阅读量987

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/119216364

本文介绍如何在 Vue 中创建一个输入框，实现实时搜索功能。通过示例代码展示具体的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说先看效果：
请添加图片描述
代码如下：

<template>
  <div style="padding-left: 3px; margin-top: 3px">
    <!-- 搜索框 -->
    <div class="input-warp">
      <input
        class="input"
        v-model="keyWord"
        type="text"
        placeholder="输入城市名称进行查找"
      />
      <el-button class="input-search" icon="el-icon-search" circle></el-button>
    </div>
    <div class="searchList" v-if="keyWord">
      <ul>
        <li
          v-for="(item, index) in searchData"
          :key="index"
          @click="chooseCode(item)"
        >
          {
   
   {
   
    item.name }}
        </li>
        <li v-if="searchData.length == 0">暂无相关城市，请换个城市进行搜索</li>
      </ul>
    </div>
  </div