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 相关文章推荐
Javascript 对象的解释
Nov 24 Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
node.js 动态执行脚本
Jun 02 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
浅谈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 FPDF类库应用实现代码
2009/03/20 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
Node调用Java的示例代码
2017/09/20 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
详解JavaScript中的强制类型转换
2019/04/15 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
开业庆典答谢词
2014/01/18 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014年团队工作总结
2014/11/24 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Mysql Show Profile
2021/04/05 MySQL
Pytorch可视化的几种实现方法
2021/06/10 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
vscode中使用npm安装babel的方法
2021/08/02 Javascript