动态改变 vue 组件中显示的变量样式

Question

我有一个使用 v-for 显示元素的 div，就像那样<div v-for"element in example" :id="element+'id'">{{element}}</div>如您所见，这些元素具有唯一的 ID。一切正常，但我有特定的时刻需要不同的风格。当当前元素在括号中包含 ['some text'] 时，我想为这个特定文本分配样式，而不是整个元素，只有括号中的文本。有没有简单的方法，或者？

Answer 1

如果三元 (? 运算符) 返回 true，则应用一些样式。否则根本不应用任何样式。

<div v-for"element in example" :id="element+'id'" :style="element.includes('[some text]') ? 'custom-css-styles-here' : ''">

    {{ element }}

</div>

Answer 2

您可以在三元操作中通过您的验证

<div v-for"element in example" :id="element+'id'" :class="element.includes('[some text]') ? 'color-red' : 'color-blue'">

  {{element}}

</div>

我不太明白你的验证，但如果你给我释放，我可以做手术