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

Question

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

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 的 class 为“base”，然后是“b1”、“b2” ，“b3”。当我检查元素时，我可以在网页上看到这些 classes 已正确设置。

我在我的风格中描述了论文 class 的一些规则（主要是背景颜色、边框半径等），但它们不适用。

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

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

（此外，我知道使用 v-html 可能很危险，因此如果您对这整件事有更好的想法，我会洗耳恭听）

Answer 1

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

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

Answer 2

想通了。对于那些想知道的人，如果您的文件中的标记是作用域的，那么返回 html 代码的 switch 语句不会被设置样式。不确定为什么，但删除范围内的工作。如果您决定这样做，但要使用唯一的 class 名称，因为这些样式将遍布整个应用程序！

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

Vue 2 - Styling HTML returned in a switch statement

javascript

css

switch-statement

vue.js

vuejs2