Vue中如何实现一个底部导航栏组件
本篇内容介绍了“Vue中如何实现一个底部导航栏组件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
成都创新互联公司专注于阳泉企业网站建设,响应式网站开发,商城网站建设。阳泉网站建设公司,为阳泉等地区提供建站服务。全流程按需定制网站,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务
代码如下:
{{item.name}}
:src="index===idx?item.iconSelect:item.icon" 通过代码判断是否是当前页面,选择不通的图片
@click="$router.push(item.push) 跳转到各个页面
Style:
.footer{ display: flex; position: absolute; left: 0; bottom: 0; box-sizing: border-box; height: 6rem; background: #909090; width: 100%;} div{ flex: 1; font-size: 30px; } div img{ width: 30px; height: 30px; } div p{ color:black; } .on{ color: red; }
使用方式:
导入:
“Vue中如何实现一个底部导航栏组件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
本文名称:Vue中如何实现一个底部导航栏组件
文章分享:http://pwwzsj.com/article/gcocsj.html