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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
JS中数据结构之栈
Jan 01 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
JavaScript实现与web通信的方法详解
Aug 07 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
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
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
浅析python中的分片与截断序列
2016/08/09 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
《花的勇气》教后反思
2014/02/12 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
新学期开学演讲稿
2014/05/24 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript