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 相关文章推荐
Js获取事件对象代码
Aug 05 Javascript
document.forms用法示例介绍
Jun 26 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
react中props 的使用及进行限制的方法
Apr 28 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.MVC的模板标签系统(二)
2006/09/05 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JavaScript 拖拉缩放效果
2008/12/10 Javascript
IE8 浏览器Cookie的处理
2009/01/31 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
浅谈Python 对象内存占用
2016/07/15 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
python感知机实现代码
2019/01/18 Python
详解Python绘图Turtle库
2019/10/12 Python
简单了解Python write writelines区别
2020/02/27 Python
详解python tkinter 图片插入问题
2020/09/03 Python
博士学位自我鉴定范文
2013/12/26 职场文书
如何写好升职自荐信
2014/01/06 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
安徽导游词
2015/02/12 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
2015年党总支工作总结
2015/05/25 职场文书
社区干部培训心得体会
2016/01/06 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python