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中直接引用Microsoft的COM生成Word
Jan 20 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
ajax异步请求详解
Jan 06 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
基于jquery的Repeater实现代码
2010/07/17 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
详解angular element()方法使用
2017/04/08 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
前端性能优化建议
2020/09/17 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
公证书样本
2014/04/10 职场文书
涨价通知怎么写
2015/04/23 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
鉴史问廉观后感
2015/06/10 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python