Динамически изменять стиль переменной, отображаемой в компоненте vue

Question

У меня есть div, который отображает элементы, используя v-for, например,

<div v-for"element in example" :id="element+'id'">
{{element}}
</div>

элементы имеют уникальные идентификаторы, как вы можете видеть. И все работает, но у меня есть определенный момент c, когда это должно быть стили по-другому. Когда текущий элемент содержит ['некоторый текст'] в таких скобках, я хочу назначить стиль этому конкретному c тексту, а не всему элементу, а только тексту в скобках. Есть ли простой способ для этого, или?

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>

Я не совсем понимаю вашу проверку, но если вы дадите мне разрешение, я смогу выполнить операцию