Vue 实现点击搜索按钮展示不同样式

可以使用 Vue 的条件渲染指令 'v-if' 或 'v-show' 来实现这个功能。

首先，在初始样式里，使用 'v-if' 或 'v-show' 指令来控制搜索框的显示和隐藏。例如：

<div v-if='showSearchBox'>
  <!-- 搜索框代码 -->
</div>

或者

<div v-show='showSearchBox'>
  <!-- 搜索框代码 -->
</div>

其中，'showSearchBox' 是一个 Boolean 类型的变量，在初始状态下为 false，因此搜索框不会被渲染出来。

然后，在点击搜索按钮时，修改 'showSearchBox' 变量的值为 true，从而显示搜索框。可以使用 Vue 的事件绑定指令 'v-on' 来监听点击事件，并在事件处理函数中修改 'showSearchBox' 变量的值。例如：

<button v-on:click='showSearchBox = true'>搜索</button>

其中，'showSearchBox' 需要在 Vue 实例中定义为 'data' 属性。例如：

new Vue({
  el: '#app',
  data: {
    showSearchBox: false
  }
});

这样就可以实现在初始样式中隐藏搜索框，点击搜索按钮后展示别的样式的功能了。