搜索的数据 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>
搜索数据 限制数据的显示个数 清空本地存储 搜索的数据跳转到其他页面显示出来
猜你喜欢
转载自blog.csdn.net/weixin_46457184/article/details/105024072
今日推荐
周排行