Vue实现点击切换导航栏效果

编译环境

Vue2.x 版本

期待实现的效果图

解决思路

通过设置动态class的方式，通过点击传递此时所点击item的索引值，当索引值和所设置的初始值相等时，动态class的布尔值为true，进而实现菜单栏的高亮

代码实现

点击高亮的样式为active，通过动态class，当active值为true时，将标签样式赋值给span标签
给span设置点击事件，将此时点击的索引值传递给btn函数中
在data中设置findIndex值为-1，btn函数中将传递过来的索引值赋值给findIndex
当findIndex 和 index值相同时，active值为true
此时代码高亮

<template><div class="wrap"><div class="nav_left" id="navLeft"><div class="nav_content" v-for="(obj,index) in arr" :key="index"><span :class="{active:index === findIndex}"@click="btn(index)">{{obj.first_name}}</span></div></div><div class="down"><i class="iconfont icon-xiajiantoubeifen gray"></i></div></div>
</template><script>
export default {data() {return {arr: [{first_id: "0",first_name: "热门"},{first_id: "621",first_name: "\u5496\u5561",},{first_id: "627",first_name: "\u996e\u98df",},{first_id: "279",first_name: "\u7537\u88c5",},{first_id: "294",first_name: "\u5973\u88c5",},{first_id: "122",first_name: "\u773c\u955c",},{first_id: "339",first_name: "\u5185\u8863\u914d\u9970",},{first_id: "391",first_name: "\u6bcd\u5a74",},{first_id: "35",first_name: "\u978b\u9774",},{first_id: "39",first_name: "\u8fd0\u52a8",},{first_id: "153",first_name: "\u7bb1\u5305",},{first_id: "119",first_name: "\u7f8e\u5986\u4e2a\u62a4",},{first_id: "355",first_name: "\u5bb6\u7eba",},{first_id: "51",first_name: "\u9910\u53a8",},{first_id: "334",first_name: "\u7535\u5668",},{first_id: "369",first_name: "\u5bb6\u88c5",},{first_id: "10",first_name: "\u5bb6\u5177",},{first_id: "223",first_name: "\u6570\u7801",},{first_id: "429",first_name: "\u6c7d\u914d",},{first_id: "546",first_name: "\u5065\u5eb7\u4fdd\u5065",},{first_id: "433",first_name: "\u5b9a\u5236",},],findIndex:0,};},methods: {btn(index){this.findIndex = index}}
};
</script><style>
.wrap {width: 100%;display: flex;margin: 0.2rem 0 0 0;position: relative;
}/*左侧的导航样式*/
.nav_left {width: 21.1875rem;overflow: scroll;
}.nav_left::-webkit-scrollbar {display: none;
}.nav_content {white-space: nowrap;padding: 0 0.7rem;
}.nav_content span {display: inline-block;padding: 0.4rem 0.6rem;font-size: 0.875rem;
}.nav_content .active {border-bottom: 2px solid #7f4395;color: #7f4395;
}.nav_left,
.down {float: left;
}/*右侧导航部分*/
.down {flex: 1;display: flex;align-items: center;justify-content: center;
}.gray {color: gray;display: inline-block;vertical-align: middle;
}
</style>

Vue项目设置导航栏高亮相关推荐

uniapp动态设置导航栏和标题栏语言
hbuilderx中uniapp动态设置导航栏和标题栏语言一 .下载vue-i18n文件引入项目 hbuilder本身是带有能够运行nmp命令的终端,由于用不到全部文件,我采用的是在电脑cmd窗口下 ...
【最全IDEA个性化教程】idea设置主题+恢复主题默认设置+设置选中代码颜色+关键字颜色+设置字体大小、样式、颜色+设置背景颜色、图片+设置导航栏背景颜色+设置控制台字体样式及背景+常用快捷键)
目录下载设置主题样式+恢复主题默认设置 1 个性化代码段 1.1设置颜色设置光标颜色自定义图片做背景修改代码段的颜色和背景颜色选中代码块颜色修改,修改括号颜色 1.2 设置字体大小.格式 1 ...
vue+elementui左侧导航栏
vue+elementui左侧导航栏踩坑最近接触前端vue+elementui,记录一下 1. element官网这里:default-active="***"前面没有冒号,直接 ...
vue制作导航栏html,vue实现nav导航栏的方法
vue实现nav导航栏的方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue实现nav导航栏的方法,编程之家小编觉得挺不错的,现在分 ...
vue制作导航栏html,Vue如何实现导航栏菜单的方法
Vue如何实现导航栏菜单的方法发布时间:2020-08-20 09:42:45 来源:亿速云阅读:235 作者:小新这篇文章将为大家详细讲解有关Vue如何实现导航栏菜单的方法,小编觉得挺实用的, ...
怎么做网络推广浅析网站如何设置导航栏可以使网站优化更好？
网站导航就像是网站的"地图"一样,为用户们提供更好地浏览体验,为他们更好地指路,提高访客的好感度.众所周知,网站常见的导航可分为顶部导航.底部导航.面包屑导航三大类型.今天怎么做网 ...
IOS设置导航栏返回按钮，并添加事件返回主页面
IOS设置导航栏返回按钮,并添加事件返回主页面前提是已经push了一个viewController了.才能使用. XXXTableViewController 里面书写 - (void)viewDi ...
IOS设置导航栏的背景图片和文字
IOS设置导航栏的背景图片和文字 - (void)viewDidLoad {[super viewDidLoad];[self.navigationBar setBackgroundImage:[UI ...
设置导航栏的相关属性
很多其它具体内容请參考http://www.cocoachina.com/applenews/devnews/2013/1104/7287.html 别人的代码敲一遍就成了自己的了 //改动导航栏的背 ...

Vue项目设置导航栏高亮