使用vue实现简单的搜索功能
!DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" titleDocument/title script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"/script/headbody div id="ssl" input type="text" placeholder="请输入您要查询的数据" v-model="title" @input="search()" !-- 给input框绑定一个v-model用来接收输入的数据 给他一个input事件-- ul li v-for="(e,i) in lists" :key="i" !-- 循环遍历出来查找的数据 -- {{e.title}} /li /ul /div/bodyscript new Vue({ el:"#ssl", data:{ title:"", list:[//随便写几个数据 { id: 1, title: "想和有趣的人一起浪费人生" }, { id: 2, title: "vue的小案列" }, { id: 3, title: "nodeJs" }, { id: 4, title: "微信小程序" }, { id: 5, title: "react" }, { id: 6, title: "仓库管理" }, { id: 7, title: "vuex" }, { id: 8, title: "redux" }, { id: 9, title: "router" } ], lists:[] }, methods:{ search() { this.lists=[];//每次查找先把上次查找的清空 if(this.title=="")//判断输入框是否输入内容，如果没有return false 结束 { return false; } for(var i in this.list) { if(this.list[i].title.indexOf(this.title) = 0) //循环判断如果我们模拟的数据中包含我的input框输入的内容 则添加新数组里面 然后遍历出来 { this.lists.push(this.list[i]) } } } } })/script/html效果如下
在这里数据可以自行定义，或者使用axios请求一个接口
