vue实战之搜索框功能实现

一、静态页面

<template>
  <div class="search">
    <div class="top">
      <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)" />
      <van-search autofocus="true" shape="round" v-model="search" show-action placeholder="请输入搜索关键词"
        @search="goSearch(search)" />
    </div>
    <div class="history">
      <div class="title">
        <span>最近搜索</span>
        <van-icon @click="clear" name="delete-o" size="16" />
      </div>
      <div class="list" v-if="history.length !== 0">
        <div v-for="item in history" :key="item" class="list-item">
          <div @click="goSearch(item)">
            {
  { item }}
          </div>
          <div>
            <button @click="deleteHistory(item)">Ⅹ</button>
          </div>
        </div>
      </div>
      <div class="empty" v-else>暂无搜索记录</div>
    </div>
    <div class="result" v-if="list.length != 0">
      <div class="contain" v-for="(item, index) in list" v-bind:key="index" @click="getTodeatil(item.pid)">
        <van-image