直接上代碼：

  <!-- 搜索 -->
  <div class="search_header">
    <input type="search" name="search" v-model="searchValue" class="search_input"><span>取消</span>
    <img src="../../assets/搜索.svg" alt="搜索" class="search_icon" />
    <img src="../../assets/清除.svg" alt="清除" class="search_clean" @click="cleanInputValue">
  </div>

    // 搜索高亮
    getSearchLine(value) {
        let titleString = value
        if (!titleString) {
          return '';
        }
        if (this.searchValue && this.searchValue.length > 0) {
          // 匹配關(guān)鍵字正則
          let replaceReg = new RegExp(this.searchValue, 'g');
          // 高亮替換v-html值
          let replaceString = '<span class="search-text">' + this.searchValue + '</span>';
          // 開始替換
          titleString = titleString.replace(replaceReg, replaceString);
        }
        return titleString
    }

考慮到搜索功能都是及時(shí)調(diào)取查找接口的，小伙伴們可以等去到返回值在做渲染。 添加定時(shí)器即可。
效果圖：

image.png

右邊的叉叉按鈕因?yàn)槭莢-model綁定的，添加個(gè)清除數(shù)據(jù)功能就好：

    cleanInputValue() {
      this.searchValue = ''
      const oInput = document.querySelector('.search_input')
      oInput.focus()
    },