将条件 CSS 应用于 Vue

Question

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

例如，如果我希望类在{{s.specialType}} == "food"时是成功的，并且在{{s.specialType}} == "drink"时是危险的，我会怎么做。

我将不胜感激任何帮助。 谢谢

<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

Answer 2

在谷歌快速搜索条件渲染后，我想出了以下解决方案：

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

Vue.js 文档