搜索功能+上键下键+存储历史搜索

直接上代码

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>