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遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 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
建立动态的WML站点(二)
2006/10/09 PHP
如何将数据从文本导入到mysql
2006/10/09 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
JavaScript 继承详解(一)
2009/07/13 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
vue无限轮播插件代码实例
2019/05/10 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
js实现碰撞检测
2021/01/29 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
二年级体育教学反思
2014/01/15 职场文书
工程采购员岗位职责
2014/03/09 职场文书
实习生岗位职责
2014/04/12 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
朋友离别感言
2015/08/04 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
python 破解加密zip文件的密码
2021/04/22 Python