点击Vue菜单栏切换单个类的方法

步骤：

遍历对象(商品)以获取菜单栏中每个项目的项目和索引

添加click事件toggle()并传入下标参数：@ click=' fn1()；' fn2()'

动态开关类名： class=' { ' active ' : index==check index } '(类给出下标值对应的DOM)

Ps:这个方法直接切换类，不需要手动添加类来清除其他非动态DOM

超文本标记语言

ul li v-for='(项目，索引)in goods ' class=' menu-item ' @ click=' toggle(索引)；scrollToFoods(index)' : class=' { ' active ' : index==check index } '/Li/ulscript

导出默认值{ data(){ return { check index : 0//初始化第一个列块以突出显示}}，方法： {toggle (index) {this。checkindex=index} CSS。活动{ background: white}效果图显示：

扩展知识：元素界面下导航高亮的误区

同事搭建的vue elementui项目有一个bug，elementui的导航亮点一直是错的。调试了三个多小时，他来问我，结果悲惨地加班。

最后，我真的不耐烦了。我放弃了在导航中使用elementui组件，自己写的。今天有空的时候真的很不服气，就自己写了一篇。结果刚刚过去。

粘贴代码：

模板El-menu : default-active=' $ route . path ' background-color=' # 383838 ' text-color=' # CCC ' active-text-color=' # fff 000 ' router El-menu-item index='/dashboard ' span slot=' title ' overview/span/El-menu-item El-子菜单index=' 2 ' Template slot=' title ' navigation 1/Template El-menu-item index='/nav 1/index ' navigation 11/El-menu-item-El-submenu

:默认-活动=' $ route.path '这定义了当前的高亮显示。示例：当前页面是概述。通过打印，我们知道$route.path的值是“/dashboard”，而不是“dashboard”。前者是$route.path，后者是$ route.name，后面会用到。

路由器这里没什么好说的，直接去路由器就行了。

El-menu-item index='/dashboard '在这里，按照之前的$ route.path/$ route . name输入值，确保这三点基本正确，导航高亮基本没问题。

至于其他花里胡哨的写作方法，我们以后会继续研究。

以上在Vue菜单栏点击切换单个类的方法就是边肖分享给大家的全部内容。希望能给大家一个参考，多支持我们。