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中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...
随机推荐
- python 利用正则表达的式提取特定数据如手机号
import re file=open('1.txt','r') listfile=file.readlines() listfile=','.join(listfile)#合并文本 listfile ...
- python单元测试框架-unittest(五)之跳过测试和预期失败
概要 @unittest.skip(reason): skip(reason)装饰器:直接跳过测试,并说明跳过测试的原因. @unittest.skipIf(reason): skipIf(condi ...
- 虚拟机扩容(/dev/mapper/centos-root 空间不足)
1:.首先查看我们的根分区大小是多少 df -h 文件系统 类型 容量 已用 可用 已用% 挂载点 /dev/mapper/centos-root xfs ...
- JetBrains IDE激活
License server(服务器地址为http://idea.iteblog.com/key.php) Active Code:生成网址:http://idea.iteblog.com/
- weblogic 10.3.5重置密码
weblogic 10.3.5重置密码 热度1,609 ℃ 时间:2013-12-26 10:26 分类:middleware 评论数:0 条 0 weblogic默认验证密码机制:如 ...
- MVC中的验证码
下面是一个完整的mvc controller类 public class CodeController : Controller { private const string CODE = " ...
- js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别 (译)
stackOverflow中看到了很久以前问的一个关于函数声明的问题,问题对函数剖析的特别深.这里翻译了一下组织成一篇小博文,加深一下对这两种声明方式的印象.虽是老调重弹,但是只要能帮助理解问题,不管 ...
- PHP与redis的操作
String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象 $redis-&g ...
- canvas的isPoinInPath API实现交互
- nginx配置https服务器
方法一 1.创建证书 #cd /usr/local/nginx/conf #openssl genrsa -des3 -out server.key 1024 #openssl req -new -k ...