vue如何通过点击搜索图标出现搜索框

你可以通过以下步骤实现：

1. 在你的Vue组件中添加一个包含搜索图标的按钮，例如：

<template>
  <div>
    <button @click="showSearch = true">
      <i class="fa fa-search"></i>
    </button>
    <div v-show="showSearch">
      <!-- 搜索框的HTML代码 -->
    </div>
  </div>
</template>

2. 在组件的data选项中添加一个showSearch属性，并将其初始化为false，例如：

<script>
export default {
  data() {
    return {
      showSearch: false
    }
  }
}
</script>

3. 将搜索框的HTML代码添加到组件中，例如：

<template>
  <div>
    <button @click="showSearch = true">
      <i class="fa fa-search"></i>
    </button>
    <div v-show="showSearch">
      <input type="text" placeholder="搜索">
      <button @click="showSearch = false">关闭</button>
    </div>
  </div>
</template>

4. 在搜索框的HTML代码中添加一个关闭按钮，以便用户可以关闭搜索框，例如：

<template>
  <div>
    <button @click="showSearch = true">
      <i class="fa fa-search"></i>
    </button>
    <div v-show="showSearch">
      <input type="text" placeholder="搜索">
      <button @click="showSearch = false">关闭</button>
    </div>
  </div>
</template>

这样，当用户点击搜索图标时，搜索框将显示出来，当用户点击关闭按钮时，搜索框将关闭。