Vue 2 - 在 switch 语句中返回样式 HTML答案

【问题标题】：Vue 2 - Styling HTML returned in a switch statementVue 2 - 在 switch 语句中返回样式 HTML
【发布时间】：2022-02-08 16:09:33
【问题描述】：

我正在构建一个应该接收各种后端数据的通用组件。我写了一个开关。一个条件是：

case 'Bases':
                let bases = variant[tableName][colValue].map((base) => {
                    return `<div class="base b${base.strongestIndication}">${base.name}</div>`
                })
                return bases.join('')

我在模板中使用 v-html，因此在本例中，我们创建了 3 个 div，每个 div 都有一个“base”类，然后是“b1”、“b2”、“b3”。当我检查元素时，我可以在网页上看到这些类已正确设置。

我已经以我的风格描述了这些类的一些规则（主要是背景颜色、边框半径等），但它们并不适用。

我猜这可能与创建这些 div 之前应用的 CSS 有关，但我不确定。

我应该怎么做才能让这些由 JS 创建的标签的样式正确？

（另外，我知道使用 v-html 可能很危险，因此，如果您对整个事情有更好的想法，我会全力以赴）

【问题讨论】：

标签： javascript css vue.js vuejs2 switch-statement

【解决方案1】：

无需在组件方法中构建标记。在模板中定义它并动态绑定类。由于您没有发布api数据结构，也没有您如何使用这段sn-p代码，我只能重构具体情况。

<div 
  v-for="base in colValues" 
  :class="['base', `b${base.strongestIndication}`]">
  {{base.name}}
</div>

【讨论】：

感谢您的回复，这里的问题是 div 位于内。该 td 将根据某些列名称接收数据（有时它将是一个字符串，有时是一个数组，有时是一个布尔值......）。结构如下：
{{ mySwitchMethod(item, column) }}
我的开关观察列名并相应地操作项目。有时它会返回 item[column.name]，有时它必须渲染多个组件或 svgs...

【解决方案2】：

想通了。对于那些想知道的人，如果文件中的标记是作用域的，则返回 html 代码的 switch 语句没有样式。不确定原因，但删除范围内的工作。如果您决定这样做，但类名必须唯一，因为这些样式将遍布整个应用程序！

【讨论】：