嘿，我完全懂你遇到的困扰——Vue的<style>区块确实不支持直接嵌入JavaScript逻辑，所以你那种在style里写switch的写法肯定跑不起来。不过有几种实用的方案能帮你实现根据brand变量动态加载对应CSS的需求，我给你详细说说：

方案一：在Script中使用动态import()按需加载 #

这是最直接的按需加载方案，利用ES的动态导入语法，在组件的生命周期钩子（比如mounted）里根据brand的值导入对应的CSS文件。Vue会自动处理样式的注入，而且如果用了Webpack/Vite这类构建工具，还能实现代码分割，只打包当前需要的样式。

示例代码：

<template>
  <div>
    <!-- 你的组件内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      brand: 'op' // 这里可以是从接口、路由参数或其他地方获取的动态值
    };
  },
  async mounted() {
    try {
      // 根据brand动态导入对应CSS
      switch (this.brand) {
        case 'ed':
          await import('./ed.css');
          break;
        case 'op':
          await import('./op.css');
          break;
        case 'go':
          await import('./go.css');
          break;
        default:
          // 可选：加载默认样式或者什么都不做
          console.log('未匹配到对应品牌样式');
      }
    } catch (err) {
      console.error('加载样式失败:', err);
    }
  }
};
</script>

注意：这种方式导入的CSS是全局生效的，如果需要样式只作用于当前组件，可以结合CSS Modules或者把样式写在带scoped的组件里（不过动态导入的全局样式会不受scoped限制，这点要留意）。

方案二：动态绑定根元素Class，结合全局导入的品牌样式 #

如果你的品牌样式是按命名空间划分的（比如.ed-brand、.op-brand包裹各自的样式），可以先把所有品牌的CSS都导入，然后通过给组件根元素动态绑定Class来切换生效的样式。这种方案适合需要频繁切换品牌样式的场景。

示例代码：

<template>
  <!-- 动态绑定品牌对应的Class -->
  <div :class="`${brand}-brand`">
    <!-- 组件内容 -->
    <header class="page-header">品牌专属头部</header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brand: 'op'
    };
  }
};
</script>

<style lang="sass">
/* 导入所有品牌的样式文件 */
@import './ed.css';
@import './op.css';
@import './go.css';
</style>

对应的ed.css示例：

.ed-brand .page-header {
  background-color: #2ecc71;
  color: #fff;
}

这种方案的优点是样式切换无延迟，缺点是会把所有品牌的CSS都打包进最终产物，适合品牌样式体积不大的场景。

方案三：使用Vue组件封装品牌样式（进阶） #

如果你的品牌差异不仅限于样式，还涉及部分结构变化，可以把每个品牌的样式和对应的结构封装成单独的子组件，然后根据brand动态渲染对应的组件。比如：

<template>
  <component :is="`${brand}-style-component`"></component>
  <!-- 公共组件内容 -->
</template>

<script>
export default {
  data() {
    return {
      brand: 'op'
    };
  },
  components: {
    // 按需注册品牌组件
    'ed-style-component': () => import('./EdStyleComponent.vue'),
    'op-style-component': () => import('./OpStyleComponent.vue'),
    'go-style-component': () => import('./GoStyleComponent.vue')
  }
};
</script>

每个品牌组件里只写对应的scoped样式，这样既能实现样式隔离，又能按需加载组件和样式。

内容的提问来源于stack exchange，提问作者arkanos