gpt4 book ai didi

Vue实现导航栏菜单

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue实现导航栏菜单由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下 。

这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单.

menu.html 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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" >
  <!--导航栏左边logo跟项目名称-->
  < 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 >

效果图如下:

Vue实现导航栏菜单

学会这个之后,大家可以学习下vue的相关UI组件库,那样更简单,做出来的效果也更漂亮哟 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

原文链接:https://blog.csdn.net/qq_28529373/article/details/78814533 。

最后此篇关于Vue实现导航栏菜单的文章就讲到这里了,如果你想了解更多关于Vue实现导航栏菜单的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com