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

搜索逻辑实现

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

  1. 先将搜索栏需要用到的数据先从父组件传过来。
    在这里插入图片描述
  2. 绑定我们的输入框
    在这里插入图片描述
  3. 先把数据设置为空字符串,然后给绑定的keyword进行监听,给他加了个定时器也是为了限流。 基本思路是,如果搜索到有就遍历将字符串装进list中
    在这里插入图片描述
  4. 遍历list,将搜索的显示城市出来。
    在这里插入图片描述
  5. 设置了一个计算属性,如果搜索不到就显示"没有找到可匹配数据"
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45647118/article/details/114295085
今日推荐