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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
js预加载图片方法汇总
Jun 15 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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/08/03 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
JS实现纸牌发牌动画
2021/01/19 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python模块的制作方法实例分析
2019/12/21 Python
python 等差数列末项计算方式
2020/05/03 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
安全施工标语
2014/06/07 职场文书
庆国庆活动总结
2014/08/28 职场文书
挂职学习心得体会
2014/09/09 职场文书
丽江古城导游词
2015/02/03 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
草房子读书笔记
2015/06/29 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技