vue实现菜单切换功能
作者:遇你温柔如初 时间:2024-05-03 15:12:08
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实现菜单切换功能,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://www.cnblogs.com/web-aqin/p/10769506.html
标签:vue,菜单,切换
0
投稿
猜你喜欢
python 换位密码算法的实例详解
2021-10-07 10:25:57
python机器学习之随机森林(七)
2023-10-20 00:25:13
浅谈如何使用webpack构建多页面应用
2024-04-16 09:27:13
python 实现在tkinter中动态显示label图片的方法
2022-07-17 11:10:15
深入学习Python中的上下文管理器与else块
2023-05-11 08:57:53
mysql高级学习之索引的优劣势及规则使用
2024-01-13 16:21:33
获取SQL Server表字段的各种属性实例代码
2024-01-26 13:13:11
Python动态导入模块的方法实例分析
2022-06-08 17:56:45
Python中的MongoDB基本操作:连接、查询实例
2021-12-21 07:38:06
Python依赖包整体迁移方法详解
2022-11-03 05:32:55
用JS开发页面动画效果时的一个设计思路
2008-02-03 15:12:00
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2023-11-13 11:30:37
python批量替换页眉页脚实例代码
2022-09-09 11:02:29
POST与GET方法的区别简要分析
2022-06-26 17:27:36
PyQt5实现简易电子词典
2023-09-21 10:01:59
Python网络爬虫之获取网络数据
2022-10-09 12:35:54
Python中使用Opencv开发停车位计数器功能
2022-04-27 17:26:44
mysql 月份查询该月有付款的数据
2024-01-19 08:37:37
Python实现将Excel内容插入到Word模版中
2022-05-04 23:21:03
使用Python防止SQL注入攻击的实现示例
2022-02-09 05:28:24