vue实战开发006:制作input输入及下拉选择搜索框

1、首先我们先来设计input框加搜索按钮，这里我们直接用字体图标来实现，我引用了bootstrap和element-ui的字体图标，所以直接在i标签中加入对应的图标样式即可。

3、当然还有一种方法就是我们在删除按钮外再加个div，然后给个宽高，这样再隐藏就不会收缩了，可以给删除按钮占个位，同样可以达到效果的。

5、但是没数据的时候删除按钮放那里是不是很难看，我要实现有数据时才显示，没数据时就项滓呶茉隐藏的效果，这时我们就要对searchpro进行判断了，当没有数据时就隐藏，有数据时就显示，这里我们用到v-if的功能。<i class="el-icon-close clear_x" v-if="searchpro == '' ? false : true" @click="cleardata"></i>

6、这时我们已经实现了简单的input删除数据功能，接着我还想要有提示，当input获取焦点时我就弹出下拉框，显示最近的搜索数据，提高用户体验，所以这里我们在添加一个列表选项。

8、而li标签我们只要将其点击时的样式更改下，这样当我们选中某个样式时就可以与其他样式进行区分了，这里我们用黄色只是为了更好的区分元素之间的关系，当我们把样式调好之后在改成自己需要的样式即可。