可以使用Vue的动态绑定class或style的方式来改变选中状态的颜色,判断元素是否被选中可以使用:class绑定和Vue的计算属性。 示例代码如下:elmenu:defaultactiveactiveIndexclasselmenuverticaldemo:collapseisCollapseelsubmenuvfor(item,index)inmenus:keyindex:indexitem。indextemplatetitle{{item。title}}templateelmenuitemvfor(subItem,subIndex)initem。subList:keysubIndex:indexsubItem。index:class{menuhighlight:isActive(subItem。index)}{{subItem。title}}elmenuitemelsubmenuelmenu 其中menus是动态菜单数据,isActive是一个计算属性,用来判断当前菜单项是否为选中状态,menuhighlight是一个样式类,用来设置选中状态的样式。import{reactive,computed}exportdefault{setup(){conststatereactive({menus:〔{title:菜单1,index:1,subList:〔{title:子菜单11,index:11},{title:子菜单12,index:12}〕},{title:菜单2,index:2,subList:〔{title:子菜单21,index:21},{title:子菜单22,index:22}〕}〕,activeIndex:11,isCollapse:false});constisActivecomputed((){return(index){returnstate。activeI};});return{state,isActive};}}; 再计算属性isActive中,通过组件的activeIndex和当前菜单项的index进行比较,当它们相等时,表示当前菜单项处于选中状态。 最后,样式如下:。menuhighlight{backgroundcolor:17a2b8!color:fff!} 这样,选中的菜单项就会显示出背景色和白色字体颜色的效果了。