今天小编就为大家分享一篇Vue 菜单栏点击切换单个class(高亮)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

情景 Vue+Element 实现管理页面菜单栏， 点击菜单时 router 改变 hash 访问不同子组件。 但是改变 hash 时菜单栏展开状态和 highlight 并不会同步， 需要手动实现。 Try Try See 第一反应是通过 onhashchange 监听 hash 的变化， 讲 location.hash.slice(2) 推给 menu 的 default-active 即可。 此时通过手动输入 url 或者前进后退时均可正常加载对应状态，但是通过组件中的 link 访问时，

步骤： 遍历对象（goods）获取菜单栏每一项的对象（item）和下标（index） 添加点击事件toggle()，传入下标参数：click=”fn1();fn2()” 动态切换classname：:class=”{‘active’:index ==checkindex }”> （class赋予对应下标值的DOM） ps：该方法直接切换class，不需要手动添加清除其他非动态DOM的class html <li v-for=(item,index) in goods cl