javascript - 将条件 CSS 应用于 Vue

Question

我正在努力应用条件 Vue 语句来根据文本值更改 CSS 样式。我尝试过遵循其他教程，但没有成功，因为我是 Vue 的初学者。

例如，如果我希望该类在 {{s.specialType}} == "food" 时为成功，并且在 {{s.specialType}} 时为危险==“喝”我该怎么做。

如果有任何帮助，我将不胜感激。谢谢

<div v-for="s in spc.specials" class="column is-one-third">
    <div class="field">
        <span class="tag is-success is-capitalized">{{s.specialType}}</span>
    </div>
</div>

Answer 1

可以使用v-bind:class来实现

<span v-bind:class="{'is-success': s.specialType==='food', 'is-danger': s.specialType==='drink'}" class="tag is-capitalized">
  {{s.specialType}}
</span>

引用号:https://v2.vuejs.org/v2/guide/class-and-style.html