vue制作导航栏html,Vue实现导航栏菜单

本文实例为大家分享了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组件库，那样更简单，做出来的效果也更漂亮哟

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。