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