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. python 利用正则表达的式提取特定数据如手机号

    import re file=open('1.txt','r') listfile=file.readlines() listfile=','.join(listfile)#合并文本 listfile ...

  2. python单元测试框架-unittest(五)之跳过测试和预期失败

    概要 @unittest.skip(reason): skip(reason)装饰器:直接跳过测试,并说明跳过测试的原因. @unittest.skipIf(reason): skipIf(condi ...

  3. 虚拟机扩容(/dev/mapper/centos-root 空间不足)

    1:.首先查看我们的根分区大小是多少 df -h 文件系统                类型      容量  已用  可用 已用% 挂载点 /dev/mapper/centos-root xfs  ...

  4. JetBrains IDE激活

    License server(服务器地址为http://idea.iteblog.com/key.php) Active Code:生成网址:http://idea.iteblog.com/

  5. weblogic 10.3.5重置密码

    weblogic 10.3.5重置密码   热度1,609 ℃  时间:2013-12-26 10:26  分类:middleware  评论数:0 条 0    weblogic默认验证密码机制:如 ...

  6. MVC中的验证码

    下面是一个完整的mvc controller类 public class CodeController : Controller { private const string CODE = " ...

  7. js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别 (译)

    stackOverflow中看到了很久以前问的一个关于函数声明的问题,问题对函数剖析的特别深.这里翻译了一下组织成一篇小博文,加深一下对这两种声明方式的印象.虽是老调重弹,但是只要能帮助理解问题,不管 ...

  8. PHP与redis的操作

    String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象   $redis-&g ...

  9. canvas的isPoinInPath API实现交互

  10. nginx配置https服务器

    方法一 1.创建证书 #cd /usr/local/nginx/conf #openssl genrsa -des3 -out server.key 1024 #openssl req -new -k ...