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脚本
Aug 04 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
解析Python中的异常处理
2015/04/28 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python 字符串换行的多种方式
2018/09/06 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python使用re模块验证危险字符
2020/05/21 Python
使用npy转image图像并保存的实例
2020/07/01 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
ktv中秋节活动方案
2014/01/30 职场文书
教学实验楼管理制度
2014/02/01 职场文书
运动会广播稿50字
2015/08/19 职场文书
信息技术研修心得体会
2016/01/08 职场文书
深入浅析React中diff算法
2021/05/19 Javascript