javascript - 如何使用vue动态添加before after css代码？

Question

我正在尝试解决一个我实际上从未遇到过的问题。我正在尝试从 v-for 循环内的数据应用动态颜色。现在普通的 CSS 属性可以轻松应用。我需要在 after 中应用 css。我试过了

<div class="_tmln_shdl_crd_itm" v-for="(t, i) in timeLine" v-if="timeLine.length">
    <div class="_tmln_shdl_itm_lft">
        <p :style="`color:${t.color}`">{{t.time}}</p> // THIS WORKS
    </div>
    <style>
        ._tmln_shdl_itm_r8_one h4:after{ // TRIED TO WRITE CSS WITH FOR LOOP BUT FAILED :D
                color: t.color
         }
    </style>
<div>

那么我怎样才能使它适用于 ._tmln_shdl_itm_r8_one h4:after ？

有什么解决办法吗？ 谢谢。

Answer 1

您在循环中创建的样式每次都会为同一个选择器创建 CSS。浏览器只有一种适用于此选择器的 CSS 样式。
使用相同的选择器，最新的 CSS 获胜并被应用。这是CSS Specificity (“当多个声明具有相同的特异性时，CSS 中找到的最后一个声明将应用于该元素。”)。

您可以动态创建类:

<div class="_tmln_shdl_crd_itm" v-for="(t, i) in timeLine" v-if="timeLine.length">
    <div :class="`_tmln_shdl_itm_lft _tmln_shdl_itm_lft-${i}`">
        <h4>{{ t.time }}</h4>
    </div>
    <style>
        ._tmln_shdl_itm_lft-{{ i }} h4:after{
            color: {{ t.color }};
        }
    </style>
<div>

类似的东西应该有效。使用 ._tmln_shdl_itm_lft-{{ i }} 使类动态化可以发挥神奇作用。
这还会向页面添加大量 CSS 内容，这在实际环境中可能不是您想要的。

备注:

• 您还应该像这样输出t.color(可能只是您的示例中的一个错误):
  颜色:{{ t.color }};
• 您的示例代码中也没有 CSS 可以应用的 h4 标记，但这可能在您页面的其他位置......希望如此？