本文实例为大家分享了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的相关UI组件库，那样更简单，做出来的效果也更漂亮哟
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
