vue2.0实现导航菜单切换效果

2024-10-15 03:14:45

本文实例为大家分享了vue2.0实现导航菜单切换的具体代码，供大家参考，具体内容如下

css

*{
 margin:0;
 padding: 0;
 }
 ul li{
 list-style: none;
 }
 .navul{
 margin:100px auto 20px;
 overflow: hidden;
 }
 .navul li{
 background-color: #5597b4;
 padding:18px 30px;
 float:left;
 color: #fff;
 font-size: 18px;
 cursor: pointer;
 }
 .active{
 background-color: #5597b4;
 }
 .home .home,.new .new,.contact .contact,.service .service{
 background-color: skyblue;
 }
 .checked{
  background: #eff4f7;
 }

html

<div id="nav">
  <ul>
   <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}" v-on:click="relationClick(index)">
    <i></i>
    <span class="">{{relation.text}}</span>
   </li>
  </ul>
 </div>

<script src="js/vue.js" charset="utf-8"></script>
 <script type="text/javascript">
 var nav = new Vue({
  el:'#nav',
  data:{
  relations: [
   {text:'项目',id:'program'},
   {text:'人员',id:'person'},
   {text:'机构',id:'organization'},
   {text:'技术',id:'tech'},
   {text:'地区',id:'location'},
   {text:'国家',id:'country'}
  ],
  nowIndex:-1,
  },
  methods:{
  relationClick:function(index){
   this.nowIndex=index;
  }
  }
 });
 </script>

效果图：

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

利用vue-router实现二级菜单内容转换

二级菜单导航是一种很普遍的功能,一般网页都会有这个功能.如果是平常的做法就是改变url,跳到相应的页面:还有一种就是frame. 如果用vue的话,可以用vue-router改变<router-view>里面的组件,这样就能做到不刷新页面都能跳到相应"页面".其实url地址还是变了,但是他没有刷新页面其他位置的内容,只是改变了<router-view>里面的组件,渲染了新的组件. 在线demo:http://runjs.cn/code/9th3cgxo html
Vue.js 递归组件实现树形菜单（实例分享）

最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m
Vue.js组件tree实现无限级树形菜单

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
Vue.js手风琴菜单组件开发实例

本文为大家分享了vuejs组件开发之手风琴菜单组件实例,供大家参考,具体内容如下小图标是引入font-awesome字体图标库绘制的.效果如下图所示: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet"
Vue2递归组件实现树形菜单

今天看了老长时间递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子 //思想:当v-if='false'时,循环时进行的.所以一开始就设置为false. ggg:{ name:'gs', template:` <div> <p @click.stop='show=!show'>我是p标签</p> //这儿show必须要初始值为false,不然就是堆
Vue组件tree实现树形菜单

vue 编写的树形菜单,小巧实用,支持vue1.0,vue2.0 v1.0 功能: 1.支持多级树目录 2.支持高亮点击的节点 3.支持展开点击节点 4.支持点击收缩节点时收缩所有子目录 5.支持自定义回调函数,点击节点时回调,参数为节点信息用法:<launch-tree :list='list' :options='options'></launch-tree> list = [ { name: '一级目录', // 目录名字 isOpen: true, // 是否初始展开目录
vue多级多选菜单组件开发

本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表点击父标题栏的勾选图标可以全选或取消子列表点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选:反之,没达到全选时,父标题栏的勾选图标自动取消勾选当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选:反之,没达到全选时,最底下那个全选框自动取消勾选点击最底下那个全选框可以全选或取消全部的勾选图标所以总结起来我们重点要利
基于vue.js实现侧边菜单栏

侧边菜单栏应该是很多项目里必不可少的自己手写了一个下面是效果图下面就说一下实现的过程还是比较简单的首先导入一下需要的文件 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" typ
Vue2组件tree实现无限级树形菜单

一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst
vue2.0实现导航菜单切换效果

本文实例为大家分享了vue2.0实现导航菜单切换的具体代码,供大家参考,具体内容如下 css *{ margin:0; padding: 0; } ul li{ list-style: none; } .navul{ margin:100px auto 20px; overflow: hidden; } .navul li{ background-color: #5597b4; padding:18px 30px; float:left; color: #fff; font-size: 18px
jquery实现的仿天猫侧导航tab切换效果

本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/ 具体代码如下: <!DOCTYPE h
基于jQuery实现的菜单切换效果

这是一个非常流畅的菜单展示效果,应用在亚马逊上,当你上下移动鼠标的时候,二级菜单会非常轻快的切换,没有任何延时,给用户如滑丝般的感觉.这种效果借助于一款jQuery插件menu-aim,本文将结合实例讲解如何实现速度超快的菜单效果. HTML 首先建立主菜单,我们借用电商网站常见的商品分类.其html结构代码如下,其中我们用到了html5的data-submenu-id属性设置,这在插件调用时非常有用. <div class="active"> <ul class=&
JS实现的简洁二级导航菜单雏形效果

本文实例讲述了JS实现的简洁二级导航菜单雏形效果.分享给大家供大家参考.具体如下: 这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
js+css实现tab菜单切换效果的方法

本文实例讲述了js+css实现tab菜单切换效果的方法.分享给大家供大家参考.具体实现方法如下: index.css如下: 复制代码代码如下: * { margin: 0px; padding: 0px; } body { width: 600px; margin: 0 auto; background-color: silver; } #contanier { background-color: yellow;
vue2.0 实现导航守卫（路由守卫）

路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 全局守卫你可以使用 router.beforeEa
angular实现导航菜单切换

本文实例为大家分享了angular实现导航菜单切换的具体代码,供大家参考,具体内容如下 js部分: $scope.navArr=[{ task:{ title: "我的任务", showAdd: true, data:[ { title:'我的设计院', id:1,
微信小程序实现滴滴导航tab切换效果

本文实例为大家分享了微信小程序实现tab切换效果的具体代码,供大家参考,具体内容如下效果图如下: (请自动忽视底部tab.....) 简单介绍一下:顶部导航使用 scroll-view 组件中间的内容部分使用 swiper 组件实现的逻辑就是: 先这样在这样,这样然后那样.(此处省略200个字). 代码如下,复制可用 wxml <view class="contain">  <scroll-view class="t
微信小程序实现下拉菜单切换效果

本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下效果图: wxml:  <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
Android仿新闻顶部导航标签切换效果

最近由于个人兴趣原因,写了个模仿新闻顶部导航标签的demo.具体看下图. 那么大致上我们会用到这些知识. 1.Fragment 2.FragmentPagerAdapter 3.HorizontalScrollView 4.PopupWindow ok,那么首先进入第一步. 为了实现顶部的标签,我们要用到HorizontalScrollView,因为原有的HorizontalScrollView控件已经不能满足我们的使用了.所以这里就自定义一个HorizontalScrollView impor

vue2.0实现导航菜单切换效果

相关推荐

随机推荐