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


Posted in Javascript onMay 08, 2017

本文实例为大家分享了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>

js

<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>

效果图:

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

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery三个关闭弹出层的小示例
Nov 05 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
详解Angular 4.x Injector
May 04 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
html5+canvas实现支持触屏的签名插件教程
May 08 #Javascript
JQuery实现图片轮播效果
May 08 #jQuery
jQuery中的deferred对象和extend方法详解
May 08 #jQuery
vue 2.0路由之路由嵌套示例详解
May 08 #Javascript
node.js中EJS 模板快速入门教程
May 08 #Javascript
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python获取当前日期和时间的方法
2015/04/30 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
家长通知书教师评语
2014/04/17 职场文书
小学生期末评语大全
2014/04/21 职场文书
读书活动总结范文
2014/04/26 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
安全生产月宣传标语
2014/10/06 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android