搜索页记录 判断记录数量替换

<template>
  <div>
     <van-search
                 placeholder="请输入搜索关键词" 
                 show-action  
                 @focus="searchFocus"
                />

    <div class="search-title">
        搜索历史
        <van-icon name="delete" @click="del" />
    </div>
    <van-cell-group>
        <van-cell v-for="(item,index) in kwList" 
                    :key="index" 
                    :title="item" 
                    v-show="index < 3" />
    </van-cell-group>

  </div>
</template>

<script>
export default {
    data(){
        return {
            kwList: []
        }
    },
    created(){
        let kwList = localStorage.kwList
        if(kwList){
            this.kwList = JSON.parse(kwList)
        }

    },
    methods:{
        searchFocus(){
            this.$router.push({
                path: '/search2'
            })
        },
        del(){
             this.$dialog.confirm({
                message: '确定要清空吗？'
             }).then(()=>{
                this.kwList = []
                localStorage.kwList = JSON.stringify(this.kwList)
             }).catch(()=>{
                 
             })

            
        }
    }
}
</script>

<style scoped>
.search-title{
    margin: 10px 0px;
    display: flex;
    justify-content: space-between;
}
</style>

##第二页

<template>
  <div>
      <van-search v-model="kw" 
                 placeholder="请输入搜索关键词" 
                 show-action  
                 autofocus
                 @cancel="back"
                 @input="search"
                />
     
     <van-cell-group>
        <van-cell v-for="(item,index) in showList" 
                  :key="index" 
                  :title="item.title"
                  @click="onSearch(item.title)"
                 />
    </van-cell-group>


  </div>
</template>

<script>
export default {
    data(){
        return {
            kw: '',
            list: [],
            showList: [],
            kwList: []
        }
    },
    created(){
        this.$axios.get('http://localhost:8080/data.json').then(res=>{
            this.list = res.data.data
        })

        let kwList = localStorage.kwList
        if(kwList){
            this.kwList = JSON.parse(kwList)
        }
    },
    methods:{
        back(){
            this.$router.push({
                path: '/'
            })
        },
        search(val){
            this.showList = []

            this.list.map(item=>{
                if(item.title.includes(val)){
                    this.showList.push(item)
                }
            })
        },
        onSearch(title){
            this.$router.push({
                path: '/list',
                query: {
                    kw: title
                }
            })

            this.kwList.unshift(title)
            localStorage.kwList = JSON.stringify(this.kwList)
        }
    }
}
</script>

<style>

</style>

结果页

```css
<template>
  <div>
      <van-card
        v-for="(item,index) in showList"
        :key="index"
        num="2"
        price="2.00"
        desc="描述信息"
        :title="item.title"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        />
  </div>
</template>

<script>
export default {
    data(){
        return {
            showList: []
        }
    },
    created(){
        let kw = this.$route.query.kw;
        
        this.$axios.get('http://localhost:8080/data.json').then(res=>{
            // 获取所有数据
            let list= res.data.list

            list.map(item=>{
                if(item.title.includes(kw)){
                    this.showList.push(item)
                }
            })
        })

    }
}
</script>

<style>

</style>