1.实现大致是如下效果

2.搜索组件的页面结构

  1. <template>
  2.    <div>
  3.     <div class="search">
  4.        <input v-model='keyword' class="search-input" type="text" placeholder="输入城市名或者拼音"/>
  5.     </div>
  6.      <div class="search-content" v-show="keyword" ref="search">
  7.         <ul>
  8.            <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
  9.            <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
  10.         </ul>
  11.     </div>
  12.     </div>
  13. </template>

3.Watch监听输入的关键词keyword, 当keyword变化的时候,遍历cities, 查找与keyword匹配的,把查找的结果都放到list数组中,再渲染到页面上

接收父组件的传值和定义变量

  1. props:{
  2.            cities: Object
  3.        },
  4.        data(){
  5.            return{
  6.                keyword:'',
  7.                list:[],
  8.                timer:null
  9.            }
  10.        }

监听keyword

  1. watch :{
  2.          keyword(){
  3.             if(this.timer){
  4.                 clearTimeout(this.timer)
  5.             }
  6.             if(!this.keyword){
  7.                 this.list=[]
  8.                 return
  9.             }
  10.             this.timer=setTimeout(() => {
  11.                 const result=[]
  12.                 for (let i in this.cities){
  13.                     //console.log(i)
  14.                    this.cities[i].forEach((value) => {
  15.                        if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
  16.                            result.push(value)
  17.                        }
  18.                    });
  19.                 }
  20.                 //console.log(result)
  21.                 this.list=result
  22.             }, 100);
  23.  
  24.          }
  25.        },

4.给查找到的search-content数据绑定better-scroll组件,使其数据量大的时候可以滑动

  1. //在页面挂载完执行
  2.         mounted(){
  3.           this.scroll=new Bscroll(this.$refs.search)
  4.         }

5.给查找到的search-content设置v-show="keyword",使其没有搜索关键词输入的时候不显示search-content

6.当没有匹配的数据的时候,显示为"没有匹配的数据",设置v-show="hasNoData"

  1. computed:{
  2.           hasNoData(){
  3.               return !this.list.length
  4.           }
  5.       }

vue 城市搜索组件的更多相关文章

  1. vue城市选择组件

    适用于vue的城市选择组件 仓库地址 基本功能: 支持全选.反选以及全部清空. 支持按拼音筛选. 勾选省份将会勾选省份下所有城市. 返回数据可灵活处理. 安装 npm install cn-regio ...

  2. Vue 2.0 组件库总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  3. VUE常用UI组件插件及框架

    UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...

  4. vue轮播组件及去掉路由#

    最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...

  5. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  6. 使用vue与element组件

    1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...

  7. 详解Vue大护法——组件

    1.什么是组件化 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题进 ...

  8. 基于Vue的npm组件库

    前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...

  9. Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)

    文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...

随机推荐

  1. 015 3Sum 三个数的和为目标数字

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  2. ST-LINK接口定义

    ST-LINKIII管脚定义及接法:     ST-LINK IIILED灯三种状态含义: 常亮:目标板与ST-LINK在SWIM模式或者JTAG/SWD模式下已经通讯初始化. 闪烁:目标板与ST-L ...

  3. Choose and divide(唯一分解定理)

    首先说一下什么是唯一分解定理 唯一分解定理:任何一个大于1的自然数N,如果N不是质数,那么N可以分解成有限个素数的乘积:例:N=(p1^a1)*(p2^a2)*(p3^a3)......其中p1< ...

  4. VS Ctrl + Shift + Q

    在VS中按 Ctrl + Shift + Q 可以快速查找 void OnCollisionStay  等方法. void OnCollisionStay(Collision collision) { ...

  5. 性能测试工具LoadRunner28-LR之内部数据参数类型

    Date/Time 在“Parameter type”中您可以选择Date/Time,即:用当前的日期/时间替换参数.要指定日期/时间的格式,可以从格式列表中选择一个格式,或者指定您自己的格式. [l ...

  6. keepalived双机热备实现故障时发送邮件通知

    目前项目已经采用nginx来实现负载均衡,但是nginx调度器只有一台,上次还意外的down机一次,导致整个服务应用全部瘫痪,这次准备再加一个调度器来实现站点高可用性,也就是常说的双机热备了. mas ...

  7. pat1025. PAT Ranking (25)

    1025. PAT Ranking (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Programmi ...

  8. MVC execl 导入导出

    MVC execl 导入导出 <input id="xls" name="xls" type="file" style="w ...

  9. Day7上

    T1 部分分 枚举某个数 100 离散化.或 map 相对了不知道呢过不能过. T2 逆序对,不知对不对 归并排序,

  10. Python学习笔记--语音处理初步

    语音处理最基础的部分就是如何对音频文件进行处理. 声音的物理意义:声音是一种纵波,纵波是质点的振动方向与传播方向同轴的波.如敲锣时,锣的振动方向与波的传播方向就是一致的,所以声波是纵波.纵波是波动的一 ...