elementsub-menu 是否被选中并改变颜色

可以使用 Vue 的动态绑定 class 或 style 的方式来改变选中状态的颜色，判断元素是否被选中可以使用 :class 绑定和 Vue 的计算属性。

示例代码如下：

		
			
				
				
					{{ subItem.title }}
			
		

其中 menus 是动态菜单数据，isActive 是一个计算属性，用来判断当前菜单项是否为选中状态，menu-highlight 是一个样式类，用来设置选中状态的样式。

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      menus: [
        {
          title: '菜单1',
          index: '1',
          subList: [
            {
              title: '子菜单1-1',
              index: '1-1'
            },
            {
              title: '子菜单1-2',
              index: '1-2'
            }
          ]
        },
        {
          title: '菜单2',
          index: '2',
          subList: [
            {
              title: '子菜单2-1',
              index: '2-1'
            },
            {
              title: '子菜单2-2',
              index: '2-2'
            }
          ]
        }
      ],
      activeIndex: '1-1',
      isCollapse: false
    });

    const isActive = computed(() => {
      return (index) => {
        return state.activeIndex === index;
      };
    });

    return {
      state,
      isActive
    };
  }
};

再计算属性 isActive 中，通过组件的 activeIndex 和当前菜单项的 index 进行比较，当它们相等时，表示当前菜单项处于选中状态。

最后，样式如下：

.menu-highlight {
  background-color: #17a2b8 !important;
  color: #fff !important;
}

这样，选中的菜单项就会显示出背景色和白色字体颜色的效果了。