搜索数据 限制数据的显示个数 清空本地存储 搜索的数据跳转到其他页面显示出来

					搜索的数据     JSON是自己模拟的  直接粘贴就能用


							<template>
					    <div>
					        <header>
					
					        </header>
					        <div class="item-4">
					            <input class="txt1" @input="search()" v-model="name" @keyup.enter="add()" type="text" 				placeholder="请输入关键字">
					            <span @click="send()">取消</span>
					
					        </div>
					        <!-- 搜索数据展示 -->
					        <div class="item-3">
					             <ul>
					            <li v-for="(item,key) in lists" :key="key" @click="save(item.name)">
					                {{item.name}}
					            </li>
					        </ul>
					         <h2>历史搜索</h2>
					
					         <div class="div5">
					              <ul>
					                    <li v-for="(item,key) in lishi" :key="key">
					                        <span>{{item.name}}{{item.priect}}</span>
					                    </li>
					                </ul>
					         </div>
					         <button @click="delall()">清空历史数据</button>
					       
					        </div>
					        
					    </div>
					</template>
					<script>
					export default {
					    name:"Search",
					    data(){
					        return{
					            name:"",
					        // 这里的list是接收axios的数据 与本次存储相连接 保存数据的
					            list:[],
					            // 渲染搜索数据用的
					            lists:[],
					            // 渲染历史数据
					            lishi:JSON.parse(localStorage.getItem("list"))||[]
					        }
					    },
					    // axios请求的数据
					    mounted(){
					        this.$axios.get("/static/data.json").then((res)=>{
					            console.log(res)
					            this.list=res.data.seach
					        })
					    },
					    methods:{
					
					        // 返回到首页路由跳转
					        send(){
					            this.$router.go(-1)
					        },
					        search(){
					             this.lists=[]
					           if(this.name==""){
					               return false
					           }else{
					             this.list.forEach((item)=>{
					            // item.name 是渲染的数据   this.name 是要搜索的数据
					                 if(item.name.indexOf(this.name)!=-1){
					                     this.lists.push(item)
					                 }
					                 localStorage.setItem("list",JSON.stringify(this.lists))
					               
					             })
					
					           }
					        },
					
					        // 清空本地存储
					        delall(){
					            this.lishi=[]
					            localStorage.setItem("list",JSON.stringify(this.lists))
					        },
					
					        // 点击搜索的数据实现页面跳转并把数据传输过去这里和add事件一样只需注意个别个别参数name
					        save(name){
					            // 定义一个对象
					            var obj={
					        //   这里的name是save的name      
					            name:name
					        }
					         // 限制显示的个数
					        if(this.lishi.length==2){
					          this.lishi.splice(0,1)
					        }
					            this.lishi.push(obj)
					            // 定义arr接收本地存储的数据
					            var arr=JSON.parse(localStorage.getItem("list"))||[]
					             // 在arr中找JSON数据里的name等等于obj里的name
					            var index=arr.findIndex((item)=>{
					                return item.name==name
					            })
					             // 找不到返回-1
					            if(index==-1){
					                arr.push(obj)
					            }
					
					        console.log(this.lishi)
					        // 本地存储数据
					        localStorage.setItem("list",JSON.stringify(this.lishi)) 
					        // 点击后跳转到MY页面把数据传过去进行渲染  name是我搜索的数据obj.name
					        this.$router.push("/my?name="+obj.name)
					        // 让搜索的数据为空
					        this.name=""
					        }, 
					
					            // 键盘按下事件
					        add(){
					     //    当点击回车时页面跳转  对应搜索记录
					    //  定义一个对象obj  name等于输入的名字实现搜索
					        var obj={
					            name:this.name
					        }
					        console.log(obj)
					        // this.lishi.push(obj
					         // 限制显示的个数
					        if(this.lishi.length==2){
					          this.lishi.splice(0,1)
					        }
					            this.lishi.push(obj)
					            // 定义arr接收本地存储的数据
					            var arr=JSON.parse(localStorage.getItem("list"))||[]
					            // 在arr中找JSON数据里的name等等于obj里的name
					            var index=arr.findIndex((item)=>{
					                return item.name==obj.name
					            })
					            // 找不到返回-1
					            if(index==-1){
					                arr.push(obj)
					            }
					        console.log(this.lishi)
					        // 本地存储数据
					        localStorage.setItem("list",JSON.stringify(this.lishi)) 
					        // 点击后跳转到MY页面把数据传过去进行渲染  name是我搜索的数据obj.name
					        this.$router.push("/my?name="+this.name)
					         // 让搜索的数据为空
					        this.name=""
					        }
					    }
					}
					</script>



									跳转页面的数据

								<template>
								    <div>
								       <ul>
								           <li v-for="(item,key) in list" :key="key">
								               <img :src="'/static/img/'+item.img" alt="">
								                <a href="#">{{item.name}}</a>
								               <i>{{item.priect}}</i>
								           </li>
								       </ul>
								    </div>
								</template>
								<script>
								export default {
								    name:"My",
								    data(){
								        return{
								            // 定义一个数组接收要循环的数据
								            list:[]
								        }
								    },
								    mounted(){
								        // 接收传过来的数据
								        var name=this.$route.query.name
								        console.log(name)
								        this.$axios.get("/static/data.json").then((res)=>{
								            console.log(res)
								            // seach是搜索的循环  不要写错了否则不出数据  注意
								            res.data.seach.forEach((item)=>{
								                // 如果JSON数据循环的name等等于query接收的name
								                if(item.name==name){
								                    console.log(item)
								                    // 让item的数据添加到list中
								                    this.list.push(item)
								                }
								            })
								        })
								    }
								}
								</script>