城市选择页搜索逻辑实现

search页面。

首先写一个div放搜索的结果。

然后把搜索框和索索列表进行绑定

同时需要从City.vue里传送数据

然后在Search.vue里接收这个变量

搜索结果就被存放在list数组里面了，然后进行循环

下面给代码做一个优化

，同时加上background:#eee

如果搜索结果页的条例特别多，不能滚动，就要引入better-scroll

第一步引入

第二步mounted函数，传入参数

第三步   mounted（）{

this.scroll = new Bscroll(this.$refs.search)

}

为了让当搜索框里的内容为空时，搜索结果也为空

如果输入框里的内容过多，没有匹配项时，也要显示一部分内容

当有匹配结果时，这句话也会存在，如何消除呢

意思是当list的列表项为0时，才显示这个内容。

当搜索框里的内容为空时，下方为空，而且也不显示，热门城市什么的，如何显示呢

加入这么一句话，当keyword有值时，显示

在标签里尽量减少逻辑语句

<li class="search-item border-bottom" v-show="!list.length">
    没有找到匹配数据
</li>

所以定义一个mounted函数

<li class="search-item border-bottom" v-show="hasNoData">
    没有找到匹配数据
</li>

同时给li标签添加一个key  :key="item.id"

提交代码到码云

git add .

git commit -m 'search finish'

git push

git checkout master

git push