前言
其实这个和之前的类似通讯录的是同一个页面，但是我觉得他们两个功能不同，所以分开来说了。
布局什么的就不说，模板部分贴个图出来：
我是模板
现在正式步入逻辑部分：
1.首先要把
input框里的输入的搜索词和数据做一个双向绑定这里用到的是
v-model，绑定一个keyword，在data部分创建一个keyword变量，默认为空。
这样这样
2.
search这个组件还要接收一下City组件传过来的数据，也就是所有城市列表的那个数据。
City组件传递数据
接收一下数据
3.然后再新建一个空数组
list，它的作用是用来存放匹配的搜索结果。4.写一个侦听器
watch。监听keyword的改变。keyword对应的就是输入框的值。
watch侦听器里的逻辑
在这里做一个节流函数，提高代码的执行效率，因为这段的操作还是比较多的。去
data处定义一个timer:null。回到
watch，让主要操作在timer这个定时器里延时100毫秒执行，然后在上面写一个判断。这里的逻辑是，当keyword发生改变的时候，清除掉之前的逻辑，然后延时100毫秒执行新的逻辑操作。在定时器里，我们写一个这样的操作。
先定义一个
result空数组，然后循环一下cities里的内容，然后在里面再做一遍 遍历，也就是先循环
cities这个对象，然后将它里面的ABCD键值对，也就是那个数组再拿出来遍历一次，这个时候遍历的是这部分。
我是cities数据结构
在第二层遍历里，做一个这样的代码编写：
匹配操作
如果
value中的spell或name中能搜索到关键词，就将它添加到result之中。循环完之后，要记得将
result赋给this.list，用来存放结果。然后再去模板处将
list的内容循环出来
修改模板
优化1：如果没有匹配结果怎么办？
写上无匹配结果的dom
紧接着城市的
li，写一个新的li，是用来显示无匹配结果的，但是这个
dom不是一直都存在的，用v-show来控制它的显示，仅仅当this.list有值，也就是:
无数据的逻辑判断
优化2：输入框置为''，搜索结果匹配所有怎么解决？
这个是当我们搜索框清空的时候，所有的结果都匹配上，然后出现了所有的城市列表。
对于这个我们在watch中加一个判断就行了。
清空判断
当
keyword没有值的时候，将this.list也置空，然后return出去，不执行下面的操作了。为什么要置空
list呢？因为搜索结果列表里的值是根据list来循环的。别忘了做这个
没有输入时，整个搜索结果列表的dom都不显示
别忘了用BScroll做一下搜索列表的滚动操作。
用BScroll来做滚动
对于不清楚为啥一下要用watch，一下又是computed的时候，可以看这一篇计算属性、方法和侦听器
其实我开始思考想的是为啥不写在updated这个钩子函数里，不是说发生改变就会执行这个钩子函数吗？
后来在网上搜了一下
什么时候进updated方法？
只有事先设置好的data变量改变并且要在页面重新渲染{{}}完成之后,
才会进到这个方法，光改变data但不渲染页面是不会进来的
对于keyword，只是改变输入框的字，并未进行dom的重新渲染，所以应该不会进入updated钩子中，也就不能用这个。
网友评论