vue 城市搜索组件
1.实现大致是如下效果
2.搜索组件的页面结构
- <template>
- <div>
- <div class="search">
- <input v-model='keyword' class="search-input" type="text" placeholder="输入城市名或者拼音"/>
- </div>
- <div class="search-content" v-show="keyword" ref="search">
- <ul>
- <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
- <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
- </ul>
- </div>
- </div>
- </template>
3.Watch监听输入的关键词keyword, 当keyword变化的时候,遍历cities, 查找与keyword匹配的,把查找的结果都放到list数组中,再渲染到页面上
接收父组件的传值和定义变量
- props:{
- cities: Object
- },
- data(){
- return{
- keyword:'',
- list:[],
- timer:null
- }
- }
监听keyword
- watch :{
- keyword(){
- if(this.timer){
- clearTimeout(this.timer)
- }
- if(!this.keyword){
- this.list=[]
- return
- }
- this.timer=setTimeout(() => {
- const result=[]
- for (let i in this.cities){
- //console.log(i)
- this.cities[i].forEach((value) => {
- if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
- result.push(value)
- }
- });
- }
- //console.log(result)
- this.list=result
- }, 100);
- }
- },
4.给查找到的search-content数据绑定better-scroll组件,使其数据量大的时候可以滑动
- //在页面挂载完执行
- mounted(){
- this.scroll=new Bscroll(this.$refs.search)
- }
5.给查找到的search-content设置v-show="keyword",使其没有搜索关键词输入的时候不显示search-content
6.当没有匹配的数据的时候,显示为"没有匹配的数据",设置v-show="hasNoData"
- computed:{
- hasNoData(){
- return !this.list.length
- }
- }
vue 城市搜索组件的更多相关文章
- vue城市选择组件
适用于vue的城市选择组件 仓库地址 基本功能: 支持全选.反选以及全部清空. 支持按拼音筛选. 勾选省份将会勾选省份下所有城市. 返回数据可灵活处理. 安装 npm install cn-regio ...
- Vue 2.0 组件库总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- vue轮播组件及去掉路由#
最近公司要我去实现vue知识的系统讲解,总结一番,大致需要7节课,今天大致说一下我们使用vue需要学会的基本技能.vue是一个渐进性视图渲染框架,使用vue核心是数据出发,数据一般是我们前台从后台获取 ...
- 手把手教你实现一个 Vue 进度条组件!
最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...
- 使用vue与element组件
1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...
- 详解Vue大护法——组件
1.什么是组件化 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题进 ...
- 基于Vue的npm组件库
前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...
- Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...
随机推荐
- 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 ...
- ST-LINK接口定义
ST-LINKIII管脚定义及接法: ST-LINK IIILED灯三种状态含义: 常亮:目标板与ST-LINK在SWIM模式或者JTAG/SWD模式下已经通讯初始化. 闪烁:目标板与ST-L ...
- Choose and divide(唯一分解定理)
首先说一下什么是唯一分解定理 唯一分解定理:任何一个大于1的自然数N,如果N不是质数,那么N可以分解成有限个素数的乘积:例:N=(p1^a1)*(p2^a2)*(p3^a3)......其中p1< ...
- VS Ctrl + Shift + Q
在VS中按 Ctrl + Shift + Q 可以快速查找 void OnCollisionStay 等方法. void OnCollisionStay(Collision collision) { ...
- 性能测试工具LoadRunner28-LR之内部数据参数类型
Date/Time 在“Parameter type”中您可以选择Date/Time,即:用当前的日期/时间替换参数.要指定日期/时间的格式,可以从格式列表中选择一个格式,或者指定您自己的格式. [l ...
- keepalived双机热备实现故障时发送邮件通知
目前项目已经采用nginx来实现负载均衡,但是nginx调度器只有一台,上次还意外的down机一次,导致整个服务应用全部瘫痪,这次准备再加一个调度器来实现站点高可用性,也就是常说的双机热备了. mas ...
- pat1025. PAT Ranking (25)
1025. PAT Ranking (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Programmi ...
- MVC execl 导入导出
MVC execl 导入导出 <input id="xls" name="xls" type="file" style="w ...
- Day7上
T1 部分分 枚举某个数 100 离散化.或 map 相对了不知道呢过不能过. T2 逆序对,不知对不对 归并排序,
- Python学习笔记--语音处理初步
语音处理最基础的部分就是如何对音频文件进行处理. 声音的物理意义:声音是一种纵波,纵波是质点的振动方向与传播方向同轴的波.如敲锣时,锣的振动方向与波的传播方向就是一致的,所以声波是纵波.纵波是波动的一 ...