Vue 菜单栏点击切换单个class(高亮)的方法


Posted in Javascript onAugust 22, 2018

步骤:

遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index)

添加点击事件toggle(),传入下标参数:@click="fn1();fn2()"

动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM)

ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class

html

<ul>
   <li v-for="(item,index) in goods" class="menu-item" @click="toggle(index);scrollToFoods(index)"
   :class="{'active':index ==checkindex }">
   </li>
  </ul>

script

export default {
 data () {
  return {
  checkindex: 0 // 初始化第一个栏块高亮
  }
 },
 methods: {
  toggle (index) {
  this.checkindex = index
  }

css

.active {
 background: white;
 }

效果图展示:

Vue 菜单栏点击切换单个class(高亮)的方法

Vue 菜单栏点击切换单个class(高亮)的方法

拓展知识:浅谈element-ui下导航高亮犯过的错

同事搭建的vue+elementui项目出了个bug,elementui导航高亮一直出错。调试了3个多小时,来问我,结果悲剧地加班了。

最后实在不耐烦了,导航这块放弃使用elementui组件,直接自己来写了。今天有空,实在不服气,自己写了一个。结果直接就过了。

贴上代码:

<template>
 <el-menu
 :default-active="$route.path"
 background-color="#383838"
 text-color="#ccc"
 active-text-color="#fff000" router>
 <el-menu-item index="/dashboard">
  <span slot="title">总览</span>
 </el-menu-item>
 <el-submenu index="2">
  <template slot="title">导航1</template>
  <el-menu-item index="/nav1/index">导航11</el-menu-item>
  <el-submenu index="2-2">
  <template slot="title">导航12</template>
  <el-menu-item index="/nav2/nav1">导航121</el-menu-item>
  <el-menu-item index="/nav2/nav2">导航122</el-menu-item>
  </el-submenu>
 </el-submenu>
 </el-menu>
</template>

后来对比了下细节,发现自己是被同事带坑了:总结当时犯的错误(纠结的地方)

:default-active="$route.path"

这里定义当前高亮。举例:当前页面是总览,通过打印,得知$route.path的值是 '/dashboard' 而不是 'dashboard'。前者是$route.path,后者是$route.name。后续会用到。

router>

这里没什么好说的,直接router就行了。

<el-menu-item index="/dashboard">

这里就要根据前面的$route.path/$route.name来输入值了。保证这三点基本无误导航高亮基本就没问题了。

至于其他花式写法后面会继续研究。

以上这篇Vue 菜单栏点击切换单个class(高亮)的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
vue2中使用less简易教程
Mar 27 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 #Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 #Javascript
vuejs选中当前样式active的实例
Aug 22 #Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 #Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 #Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 #Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
PHP 强制下载文件代码
2010/10/24 PHP
关于PHP开发的9条建议
2015/07/27 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
Vue使用Three.js加载glTF模型的方法详解
2020/06/14 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python生成器(Generator)详解
2015/04/13 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python之文件读取一行一行的方法
2018/07/12 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python API自动化框架总结
2019/11/12 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python 如何上传包到pypi
2020/12/24 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
实习单位指导教师评语
2014/12/30 职场文书
楚门的世界观后感
2015/06/03 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle