开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天，点击查看活动详情
搜索框基本上是所有app或者小程序都有的功能，接下来我们要实现的搜索框的样式如下所示：
- 首先我们需要在uView组件库中找到搜索框这个组件，官方链接：www.uviewui.com/components/… ，我们使用最基础的就好了，然后我们创建一个搜索页面，在里面将uView的搜索框的组件源代码复制粘贴到上面，并且绑定一个focus为true意思是一进页面就聚焦到搜索框上，然后再绑定一个clearabled为true，意思是输入内容后会显示叉号清除内容，然后绑定两个方法，一个是clear清除搜索内容，一个是search跳转到搜索详情页，具体的代码如下所示：
<u-search
:clearabled="true"
:focus="true"
v-model="searchword"
@clear="clear"
@search="search"
></u-search>
- 当我们点击搜索的时候需要将我们输入的内容添加到定义的一个searchData空数组里面去，然后这个数组就是我们的最近的搜索记录，我们通过v-for循环渲染到页面上就可以展示出最近搜索的内容了
- 我们还需要做一个v-if的判断，如果最近没有搜索过，那搜索框下面就展示暂无搜索记录，如果搜索过了，就展示近期搜索的内容，这个需要使用到v-if以及v-else来实现，判断的依据就是v-if="searchData.length>0" ,如果这个数组的长度大于0就代表之前有搜索过，然后就展示搜索的记录，反之则v-else,展示暂无搜索记录
