本文主要是介绍搜索功能+上键下键+存储历史搜索，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
直接上代码
List.vue组件
<template><div><input type="text" placeholder="请输入您要查询的数据" v-model="title" @input="search()"@keyup.enter="add()"@keyup.up="up()"@keyup.down="down()"><!-- 给input框绑定一个v-model用来接收输入的数据 给他一个input事件--><ul><li v-for="(e,i) in lists" :key="i" @click="save(i)" @mousemove="move(i)" :class="{red:num==i}"><!-- 循环遍历出来查找的数据 -->{{e.title}}</li></ul><h3>历史搜索</h3><ul><li v-for="(e,i) in lishi" :key="i"><span>{{e.title}}</span></li></ul></div>
</template><script>
export default {data(){return{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" },{ id: 10, title: "牛奶1" },{ id: 10, title: "牛奶2" },{ id: 10, title: "牛奶3" },{ id: 10, title: "牛奶4" },{ id: 10, title: "牛奶5" },{ id: 10, title: "牛奶6" },{ id: 10, title: "牛奶7" },{ id: 10, title: "牛奶8" },{ id: 10, title: "牛奶9" },{ id: 10, title: "牛奶10" }],lists:[],//历史搜索lishi:JSON.parse(localStorage.getItem("lishi"))||[],num:0//对应的下标}},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])}}},add(){//当点击回车的时候页面跳转 对应搜索记录var obj={title:this.title}this.lishi.push(obj);this.$router.push("/details?title="+this.title)localStorage.setItem("lishi",JSON.stringify(this.lishi))this.title="" },save(i){var obj={title:this.lists[i].title}this.lishi.push(obj);this.$router.push("/details?title="+this.lists[i].title)localStorage.setItem("lishi",JSON.stringify(this.lishi))// this.title="" },move(i){this.num=i;//this.title=this.lists[i].title},up(){this.num--;if(this.num<0){this.num=this.lists.length-1;}this.title=this.lists[this.num].title},down(){this.num++;if(this.num>this.lists.length-1){this.num=0}this.title=this.lists[this.num].title}}
}
</script><style lang="scss" scoped>
.red{background: #eee;
}
</style>
Details.vue组件
<template><div>跳转页面</div>
</template><script>
export default {}
</script><style lang="scss" scoped></style>
这篇关于搜索功能+上键下键+存储历史搜索的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
