Vue如何实现导航栏菜单的方法
发布时间：-08-20 09:42:45
来源：亿速云
阅读：235
作者：小新
这篇文章将为大家详细讲解有关Vue如何实现导航栏菜单的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
具体内容如下
这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。
menu.html
导航栏左
项目名称
您好，用户！
v-bind:class="{checked: index == nowIndex}"
v-on:click="setTab('menu',index,menus)">
{{ menu.text }}
菜单一的内容菜单二的内容菜单三的内容菜单四的内容菜单五的内容菜单六的内容
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;
}
}
});
效果图如下：
关于Vue如何实现导航栏菜单的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
