这里我们通过用户名和邮箱进行查询，因此在过滤数据时，需要检测用户名和邮箱是否含有查询的单词。我们先给输入框绑定一个input事件，同时用datalist展示用户可能要查询的词语：
<input type="text" placeholder="search" @input="search" list="cars"> <datalist> <option v-for="item in searchlist" :value="item"></option> </datalist>
search功能的实现，searchlist为在输入框下方展示的可能要搜索的词语，ss数组则保存过滤后的数据，当循环完毕后，设置调用setSlist方法修改slist数组：
// 搜索 search(e) { var v = e.target.value, self = this; self.searchlist = []; if (v) { var ss = []; // 过滤需要的数据 this.list.forEach(function (item) { // 检测用户名 if (item.username.indexOf(v) > -1) { if (self.searchlist.indexOf(item.username) == -1) { self.searchlist.push(item.username); } ss.push(item); } else if (item.email.indexOf(v) > -1) { // 检测邮箱 if (self.searchlist.indexOf(item.email) == -1) { self.searchlist.push(item.email); } ss.push(item); } }); this.setSlist(ss); // 将过滤后的数据给了slist } else { // 没有搜索内容，则展示全部数据 this.setSlist(this.list); } }
每当用户输入或者删除一个字符时都会调用search方法，执行查询操作，当用点击展示词语列表时，也会调用search方法。
5. 将弹层独立为组件
其实我们应该发现，修改功能（或新增功能）从代码和样式上相对来说比较独立，我们把弹层独立为组件的形式，把需要修改的数据通过props传递给该组件（新增数据时，可以给组件传递一个空数据），当用户点击保存时，再通过$emit给了父组件（子组件不能直接父级的数据，需要用data或者computed生成一个局部变量，然后再使用$emit方法把这个局部数据再传递上去）：
// 弹层组件 Vue.component('model', { props: ['list', 'isactive'], template: `<div v-show="isactive"> <div> <h2>新增 | 修改</h2> <div> /* 省略 */ </div> </div> </div>`, computed: { modifylist() { return this.list; } }, methods: { changeActive() { this.$emit('change'); // 关闭弹层，修改isactive值 }, modify() { this.$emit('modify', this.modifylist); // 将修改后的数据传递给父组件 } } });
父组件，在父组件中截取change和modify事件，再用changeOverlay和modify来实现：
<model :list='selectedlist' :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
6. 总结
洋洋洒洒写了不少，其实里面的难点不太多，主要是form表单方面的操作，再一个就是练习下组件间的数据与事件传递。内容比较简单，欢迎各位批评指正。