vue实现菜单切换功能


Posted in Javascript onMay 08, 2019

vue实现菜单切换,点击菜单导航切换不同的内容以及为当前点击的选项添加样式,或者组件。

method里:

 css:

html代码:

<nav>
 <ul>
 <li>
 <a :class="{active : Index == 1}" @click="changeNav(1)">学校新闻</a>
 <div v-if="Index == 1" class="line"></div>
 </li>
 <li>
 <a :class="{active : Index == 2}" @click="changeNav(2)">就业新闻</a>
 <div v-if="Index == 2" class="line"></div>
 </li>
 <li>
 <a :class="{active : Index == 3}" @click="changeNav(3)">行业新闻</a>
 <div v-if="Index == 3" class="line"></div>
 </li>
 </ul>
 </nav>

js代码:

data () {
 return {
 Index:1,
}
 },

methods:

{//导航切换
changeNav(index){
 if(index == 1){

 this.Index = 1;
 }else if(index == 2){
 this.Index = 2;
 }else if(index == 3){
 this.Index = 3
 }
 },

css代码:

.news-container nav li .line{
 width: 50px;
 height: 4px;
 background: #E96463;
 border: none;
 position: relative;
 top: -4px;
 right: -86px;
}
.news-container nav li .active{
 color: rgba(233,100,99,1);
}
}

总结

以上所述是小编给大家介绍的vue实现菜单切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
jquery实现图片预加载
Dec 25 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
浅谈JS的原型和继承
May 08 #Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 #Javascript
微信小程序封装自定义弹窗的实现代码
May 08 #Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 #Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 #Javascript
js实现继承的方法及优缺点总结
May 08 #Javascript
微信小程序人脸识别功能代码实例
May 07 #Javascript
You might like
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
javascript验证身份证号
2015/03/03 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
js实现随机数小游戏
2019/06/28 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
django的autoreload机制实现
2020/06/03 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
平面设计的岗位职责
2013/11/08 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
上课打牌的检讨书
2014/02/15 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
班级年度安全计划书
2014/05/01 职场文书
反邪教警示教育方案
2014/05/13 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
2015年电工工作总结
2015/04/10 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
《静夜思》教学反思
2016/02/17 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js