Vue自定义带搜索历史记录的搜索框组件

在前端开发中，搜索框是一个常见的组件，用于在应用程序中进行数据搜索。本文将介绍如何使用Vue框架创建一个自定义的搜索框组件，该组件支持搜索输入框的清空功能，并且能够存储和清除搜索历史记录。

创建搜索框组件

首先，我们需要创建一个Vue组件，用于实现搜索框的功能。在Vue的单文件组件中，我们可以将组件的模板、样式和逻辑封装在一个文件中。

在一个新的.vue文件中，我们可以编写以下代码来创建搜索框组件：

<template>
  <div class="search-bar">
    <input type="text" v-model="searchText" placeholder="请输入搜索关键字" />
    <button @click="search">搜索</button>
    <button @click="clear">清空</button>
    <ul>
      <li v-for="history in searchHistory" :key="history">{
  
  { history }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      searchHistory: [],
    };
  },