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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
javascript this用法小结
Dec 19 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
jQuery选择器全面总结
Jan 06 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 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中,文件上传
2006/12/06 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
js校验表单后提交表单的三种方法总结
2014/02/28 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详解nodejs模板引擎制作
2017/06/14 NodeJs
微信小程序实现留言板功能
2018/11/02 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python 字典与字符串的互转实例
2017/01/13 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
五水共治一句话承诺
2014/05/30 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
针对吵架老公保证书
2015/05/08 职场文书
早安问候语大全
2015/11/10 职场文书
党校培训学习心得体会
2016/01/06 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
vue打包时去掉所有的console.log
2022/04/10 Vue.js