Vue项目城市选择页-搜索逻辑实现（8-8）

最新推荐文章于 2021-03-03 04:45:12 发布
最新推荐文章于 2021-03-03 04:45:12 发布
阅读量168 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45647118/article/details/114295085
版权

搜索逻辑实现

根据你输入的字符进行搜索你的城市。
在这里插入图片描述

  1. 先将搜索栏需要用到的数据先从父组件传过来。
    在这里插入图片描述
  2. 绑定我们的输入框
    在这里插入图片描述
  3. 先把数据设置为空字符串，然后给绑定的keyword进行监听，给他加了个定时器也是为了限流。 基本思路是，如果搜索到有就遍历将字符串装进list中
    在这里插入图片描述
  4. 遍历list，将搜索的显示城市出来。
    在这里插入图片描述
  5. 设置了一个计算属性，如果搜索不到就显示"没有找到可匹配数据"
    在这里插入图片描述
罗彬桦
关注
专栏目录
uniapp [全端兼容] - 详细实现全国城市列表A-Z市区名称索引功能，根据城市首字母分类排序城市列表选择页面，全屏省市区右侧悬浮字母索引可拖曳滑动及点击定位锚点城市名称（提供最新全国城市数据）
王佳斌
07-17 2764
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，城市列表，a-z字母的索引排序，市区名称，城市位置，选择位置时的城市列表，城市列表选择，uniApp城市列表选择，整页，通过A-Z排序的城市列表，城市自动按首字母分类，实现城市列表选择页面功能，插件组件，中国全部市区城市索引列表，右侧悬浮a至z排序点击跳转到对应城市首字母列表单独页面，如何实现整页都是市区名称列表的城市选择功能，uview uni-indexed-list，全国市区列表选择，搜索，根据区
vue实现城市列表选择功能
12-07
成果展示 最后的成果就是下面所展示的内容，因为gif图没有做，只能截图所展示，接下来，会带着大家一步一步的完成下面功能，脚手架搭建和node安装在本次案例不会讲解，如果了解，可以在我的博客园找到有详细介绍 准备工作： 　引入axios插件，调用better-scroll第三方插件，本地json文件，可以参考目录中的city.json,有条件的也可以自己去扒 功能分析 1.获取json数据展示城市列表 。 2.侧边字母定位滚动到相应的位置。 3.实现搜索城市 接下来我们开始对组件进行划分：本次案例中，总共划分为五个组件，下面就是组件的划分图 创建city组件，通过父组件获取数据，传递给子组件
vue 城市搜索组件
wyw223的博客
06-27 753
vue 城市搜索组件 1.实现大致是如下效果   2.搜索组件的页面结构 <template>    <div>     <div class="search">        <input v-model='keyword' class="search-input" type="text" placeholder=
vue.js实现城市选择页面
12-27
web端h5+vue.js实现城市选择页面和选择城市功能，完美流畅侧滑效果
vue篇1-2：城市选择弹框，并带有模糊搜索功能
草莓味的狗儿博客
06-20 1695
实现需求： 直接上代码↓↓↓（如下只是一个tab选项卡点击‘地区’显示选择城市弹框（可搜索）组件的dome，header部分轮播和页面数据的上拉分页代码就没有写上啦。如需参考留言评论） <template> <div class="Policy_information"> <!-- 栏目选项卡 --> <div class=...
六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局
微信号：RunsenLiu
10-28 1120
2020/10/28、 周三、今天又是奋斗的一天。
vue适用于pc端的城市选择组件按城市首字母排序
08-12
这个组件基于Vue.js构建，能够帮助开发者快速、方便地实现城市数据的展示，并且已经预先按照城市首字母进行了排序，为用户提供更好的搜索和选择体验。 首先，我们来理解一下Vue.js组件的基本概念。Vue组件是可重用...
vue.js的vue-cli脚手架中使用百度地图API的实例
10-17
通过以上步骤，即可在Vue项目中成功集成百度地图API，并实现地图的基本功能。本文为初学者提供了一个实例，有助于快速理解并应用百度地图API，同时也指出了在使用过程中可能会遇到的一些问题。希望本文对您的学习或...
vue-基于vue2+vuex+axios实现的天气预报小项目.zip
最新发布
05-04
在本项目中，“vue-基于vue2+vuex+axios实现的天气预报小项目”是利用Vue2作为基础框架，结合Vuex管理和axios库来获取并展示天气预报信息的一个实例。下面将详细介绍这三个关键组成部分及其在项目中的应用。 **Vue2...
vue输入框使用模糊搜索功能的实现代码
10-15
在Vue中实现输入框的模糊搜索功能，通常是通过监听输入框的值变化，然后根据用户输入的内容来...通过这篇文章，我们可以了解到在Vue项目中实现模糊搜索功能的具体方法和注意点，以及如何通过节流和防抖提高搜索性能。
百度搜索关键词逻辑算法
09-01
百度 搜索关键词算法
vue实现城市选择拼音搜索
06-10
vue实现的城市选择，带拼音选择搜索，可以多次反复使用，数据直接请求本地的资源json数据直接请求本地的资源json
vue 一个简单的项目 之二 城市选择页面 step1
purple_lumpy的博客
12-05 597
前面我们制作了首页，接下来，终于要制作另外的页面啦。 先创建一个分支 city-router，pull 下来，在新分支上写代码。 城市选择页面大致的样子如下。      好啦。进入新分支，开始写代码啦。 首先，我们要配置路由部分的内容。 打开 router 目录下的index.js 文件，如下 import Vue from 'vue' import Router from 'vu...
Vue项目城市选择页----路由配置
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
04-06 193
vue项目中页面的跳转
Vue项目城市选择页-使用Keep-alive优化网页性能（8-11）
罗彬桦的博客
03-03 124
使用Keep-alive优化网页性能 当我们每次进入城市页面的时候，我们的json都会重新被加载。 那怎么办呢？ 使用keep-alive，什么意思呢？就是当我加载一次之后，我们会把加载过的放入到内存中，下一次再执行这个函数的时候，直接使用。 但是使用keep-alive，在我们需要重新刷新的时候，重新进行请求又有另外的方法。 我们添加一个计算属性，在请求后面加上城市。 当我们使用keep-alive的时候，会自带一个函数activated()，即使我们的数据进入了缓存，当我们刷新也会重新请求，我们可
vue 一个简单的项目 之二 城市选择页面 step4
purple_lumpy的博客
12-06 221
上篇，我们实现了城市列表的样式，屏蔽了浏览器的滑动，同时，在子元素中没有设置滑动。本篇我们来设置一个友好的滑动与字母表的布局。 我们使用第三方包 BetterScroll  地址：https://github.com/ustbhuangyi/better-scroll 先，在项目里下载进来 npm install better-scroll --save 然后可以重启服务器使用了 根据...
vue 一个简单的项目 之二 城市选择页面 step2
purple_lumpy的博客
12-06 274
上篇我们完成了城市选择页面的头部，与主页面之间的跳转。本篇，我们将实现城市选择页面的搜索框布局。 首先，创建新分支 city-search ，pull下来，在新分支上写代码。 好啦。 打开编辑器，在pages 目录下 components 目录下，新建一个组件 Search.vue  初始化一下，Search.vue 代码，如下 &lt;template&gt; &lt;div c...
九、Vue项目城市选择页面搜索功能实现
铁锤妹妹的博客
10-30 1583
文章目录为input框绑定v-model双向数据绑定增加样式，引入better-scroll插件可上下滑动解决input框里没内容，列表还在的情况搜索结果问题输入框没值时不显示，有值才显示优化代码，计算属性，尽量不要在模板里有过多的逻辑 为input框绑定v-model双向数据绑定 去父组件City.vue中父传子，把cityies传给子组件Search.vue，子组件进行接收数据 监听keyWord，由于这部分经常用到，为了节约性能，用到函数节流，先在data中增加timer：null 初步效果如下
Vue学习笔记-项目开发3.9搜索查询（城市搜索功能）
Kasey_L的博客
03-06 723
一、添加样式 增加搜索显示的地方search-content，添加搜索显示的样式，相当于在之前的页面上增加一个图层，搜索的时候显示，不搜索的时候显示城市列表 <template> // 需要用一个div包裹下 因为template只允许子标签只有一组 <div> <div class="search"> <input v-model...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值