这篇文章主要为大家详细介绍了vue.js实现左边导航切换右边内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue.js左边导航切换右边内容的具体代码，供大家参考，具体内容如下
<div class="layout-container"> <div></div><div class="w"> <div class="content"> <div class="account-sidebar"> <div class="gray-box"> <div class="box-inner"> <ul class="account-nav"> <li> <div class="account-nav-primary"> <span>{{item.name}}</span><i class="el-icon-arrow-right"></i></div><div> <ul class="account-nav-second"> <li> <span>{{itemT.name}}</span></li></ul></div></li></ul></div></div><div class="gray-box sidebar-bottom content-center"> <div class="img-code"> </div><span>扫一扫下载APP</span></div></div><div class="account-content"> </div></div></div></div> @import "../../assets/style/mixin"; .main { background: #fff; color: #000; } a { color: #000; } .w { padding-top: 40px; } .img-code { margin: 0px auto 12px; } .content { display: flex; height: 100%; font-size: 16px; } .sidebar-bottom { margin-top: 20px; padding: 16px; } .content-center { text-align: center; } .account-sidebar { width: 210px; border-radius: 6px; .account-nav { padding: 15px 0; .active { color: #0156AC; } .active a{ color: #0156AC; } li:hover { a{ color: #0156AC; } } li { position: relative; line-height: 48px; .account-nav-primary { padding: 0px 20px; height: 48px; span { float: left; } i { float: right; line-height: 48px; font-size: 14px; } } .account-nav-second { li { list-style: disc<div style="color:transparent">本文来源gaodai.ma#com搞##代!^码网(</div>; list-style-position: inside; height: 48px; padding: 0 26px; text-align: left; color: #5B6976; cursor: pointer; span { margin-left: -14px; color: #A9B2BC; } &:hover{ color: #0156AC; span { color: #0156AC; } } } .active { color: #0156AC; span { color: #0156AC; } } } a { display: block; } &.current { a { position: relative; z-index: 1; height: 50px; background-color: #98AFEE; line-height: 50px; color: #FFF; } } } } } .account-content { margin-left: 24px; flex: 1; }
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持gaodaima搞代码网。
以上就是vue.js实现左边导航切换右边内容的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue.js实现左边导航切换右边内容
转载请注明原文链接：vue.js实现左边导航切换右边内容
