剑阁峥嵘而崔嵬,一夫当关,万夫莫开 @蜀道难
了解博主
- 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 来自于黑龙江 庆安
- 本站首页: 水香木鱼
- 系列专栏：后台管理系统
- 人生格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
- 小目标: 成为前端界、UI视觉界 布道师
文章内容
本次仅展示主要代码部分
一、template
1、
<i v-if="isShow" class="iconfont icon-fenlei2 el-icon--right"></i>为默认显示高级检索右侧图标；2、
<i v-else class="iconfont icon-fenlei1 el-icon--right"></i>为点击后显示的图标颜色状态
实现原理很简单，使用v-if 进行状态的切换。
<!--高级检索按钮-->
<el-button
style="color: rgba(77, 74, 74, 0.89)"
type="text"
@click="getSearch">高级检索
<i v-if="isShow" class="iconfont icon-fenlei2 el-icon--right"></i>
<i v-else class="iconfont icon-fenlei1 el-icon--right"></i>
</el-button>
<!--高级检索下拉内容-->
<div v-if="isShow" class="psSearch">
<div class="serchType">
<div class="rowList">
<p>状态分类：</p>
<ul v-for="item in stateList" :key="item.id">
<li>{{ item.text }}</li>
</ul>
</div>
<i class="rowList_i"></i>
</div>
</div>
二、script
data(){
isShow: false,//切换状态
//点击下拉显示的内容
stateList: [
{
id: 0,
text: "全部",
},
{
id: 1,
text: "进行中",
},
{
id: 2,
text: "已结束",
},
],
},
methods: {
//检索状态
getSearch() {
this.isShow = !this.isShow;
},
}
博主致谢
非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了
前端vue实现高级检索小案例，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
您的支持就是我更新的最大动力。