vue实现菜单切换功能
作者：遇你温柔如初 发布时间：2024-05-03 15:12:08
标签：vue,菜单,切换
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
0
投稿猜你喜欢
- 文件打开方式当我们用open()函数去打开文件的时候，有好几种打开的模式。'r'->只读'w'->
- 本文实例讲述了MySQL重定位数据目录的实现方法。分享给大家供大家参考。具体方法如下：MySQL允许重定位数据目录或其中的成员，这里就来介绍
前言在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的 Vuex 状态管理方案可以很好的解决组件之间的通信问- 前言使用Python发邮件，是个简单的话题，可是如何可以优雅的轻松的群发邮件，并附加PDF附件，是很多小伙伴的日常工作，却也是很多小白需要费
- 1. 连接数据库要连接到数据库首先要导入驱动程序。例如import _ "github.com/go-sql-driver/mys
- 本来想把之前对artTemplate源码解析的注释放上来分享下，不过隔了一年，找不到了，只好把当时分析模板引擎原理后，自己尝试写下的模板引擎
- 模拟栈Stack() 创建一个空的新栈。 它不需要参数，并返回一个空栈。push(item)将一个新项添加到栈的顶部。它需要 item 做参
- 最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流
- mysql在5.1之后增加了存储过程的功能, 存储过程运行在mysql内部，语句都已经编译好了，速度比sql更快. 存储过程与mysql相当
- 虽然每个图像具有多个通道和多层卷积层。例如彩色图像具有标准的RGB通道来指示红、绿和蓝。但是到目前为止，我们仅展示了单个输入和单个输出通道的
- 数字函数 ABS():求绝对值。 CEILING():舍入到最大整数。 FLOOR():舍入到最小整数。 ROUND():四舍五入 ROUN
- 本文实例为大家分享了pyqt实现右下角弹出框的具体代码，供大家参考，具体内容如下构造函数中：self.desktop=QDesktopWid
- 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
- 抽取出我们代码中共性的东西是一个很好的编程习惯。 比如，像以下的两个Python函数：def say_hello(person_name):
- 首先，我们来看一个Python抓取网页的库：urllib或urllib2。那么urllib与urllib2有什么区别呢？可以把urllib2
- Python 3.10.0a2 版本已经于 2020-11-04 发布，因此我们可以窥见 Python 3.10 的一些新特性。这些新特性很
- tensorflow里面提供了实现图像进行裁剪和填充的函数，就是tf.image.resize_image_with_crop_or_pad
- 本文介绍了写给新手同学的vuex快速上手指北小结，分享给大家，具体如下引入//store.jsimport Vue from 'vu
- 如何搭建完整的网站架构并设计出一个出色的网站？关于这个问题，我们很难提出一个绝对权威和正确的设计思路，但任何网站的设计都需要遵循一个循序渐进
- Microsoft SQL Server™ 2000 提供了两种主要机制来强制业务规则和数据完整性：约束和触发器。触发器是一种特殊类型的存储
