本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下
这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单。
menu.html
导航栏左
菜单一的内容
菜单二的内容
菜单三的内容
菜单四的内容
菜单五的内容
菜单六的内容
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组件库,那样更简单,做出来的效果也更漂亮哟
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。