Vue--导航栏菜单

来源：互联网发布：csol死神辅助源码编辑：程序博客网时间：2024/06/16 05:11

menu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏左</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/titleMenuLeft.css" />
<script type="text/javascript" src="js/vue.min.js" ></script>
</head>
<body>
<nav class="title" role="navigation">
<div class="container-fluid">

<div class="navbar-header">
<a class="navbar_title" href="#">项目名称</a>
</div>

<div class="navbar_user">
<img src="img/ani1.jpg"/>
<span>您好，用户！</span>
</div>
</div>
</nav>
<div class="body" id="body">
<div class="container">
<div class="row">

<div class="col-md-1 menu">
<ul class="nav menu_ul">
<li v-for="(menu,index) in menus" v-bind:id="menu.id"
v-bind:class="{checked: index == nowIndex}"
v-on:click="setTab('menu',index,menus)">
{{ menu.text }}
</li>
</ul>
</div>

<div class="col-md-11">
<div v-if="menu_index == 1">菜单一的内容</div>
<div v-if="menu_index == 2">菜单二的内容</div>
<div v-if="menu_index == 3">菜单三的内容</div>
<div v-if="menu_index == 4">菜单四的内容</div>
<div v-if="menu_index == 5">菜单五的内容</div>
<div v-if="menu_index == 6">菜单六的内容</div>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
<script>
var nav = new Vue({
el: '#body',
data: {
menus: [
{text: '菜单一'},
{text: '菜单二'},
{text: '菜单三'},
{text: '菜单四'},
{text: '菜单五'},
{text: '菜单六'}
],
nowIndex: 0,
menu_index: 1
},
methods: {
setTab: function(name,index,menus){
this.nowIndex = index;
this.menu_index = index + 1;
}
}
});
</script>
</html>

titleMenuLeft.css

body{
margin: 0 auto;
padding: 0;
}
.title{
position: relative;
height: 50px;
background: #1E1E1E;
}
.navbar_img{
float: left;
height: 50px;
}
.navbar_title{
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
color: #FFFFFF;
}
.navbar_user{
float: right;
width: auto;
height: auto;
margin-right: 5%;
}
.navbar_user img{
width: 40px;
height: 40px;
border-radius: 50%;
margin-top:5px;
}
.navbar_user span{
color: #FFFFFF;
font-size: 14px;
vertical-align: middle;
margin-left: 10px;
}
.body{
width: 100%;
height: auto;
float: left;
}
.body .container{
width: 100%;
height: auto;
}
/*左侧菜单栏*/
.menu{
margin: 0 auto;
padding: 0;
background: #3C3C3C;
height: 898px;
font-size: 14px;
color: #FFFFFF;
}
.menu_ul{
width: 100%;
height: auto;
}
.menu_ul li{
width: 100%;
height: 40px;
text-align: center;
border-bottom: 1px solid #666;
padding-top: 10px;
cursor: pointer;
}
.checked{
background: #1B6D85;
}

效果图如下：

阅读全文

0 0