javascript - 绑定(bind)类的 Vue 条件

Question

我正在尝试弄清楚如何根据 vue 模型有条件地将类绑定(bind)到表行。

在我的 Blade 中我有:

.low-priority{
    background-color: purple;
}
.high-priority{
    background-color: orange;
}
.important-priority{
    background-color: yellow;
}
.critical-priority{
    background-color: red;
}

在我的 vue 模板中，我返回一个 dateEvents 对象，它有一个名为 priority 的值，可以是 "High", “低”、“重要” 或 “严重”。

我想按这些优先级设置此表行的类:

<tr v-bind:class="dateEvent">

我已经看过如果返回 true 或 false 则绑定(bind)类的文档，但是如何使用条件适本地执行此操作，即 if dateEvent.priority === 'Low' then class is .low -优先级'

Answer 1

不确定在这种情况下是否需要条件:

<tr :class="`${dateEvent.priority.toLowerCase()}-priority`">

或者如果您不喜欢反引号:

<tr :class="dateEvent.priority.toLowerCase() + '-priority'">

更通用的解决方案是使用计算属性。但在这种情况下，这会有点重复。

<tr :class="rowClass">

computed: {
  rowClass () {
    const priority = this.dateEvent.priority

    return {
      'low-priority': priority === 'Low',
      'high-priority': priority === 'High',
      'important-priority': priority === 'Important',
      'critical-priority': priority === 'Critical'
    }
  }
}

如果 dateEvents 无法通过 this 获得，因为它是一个循环参数(即来自 v-for)，那么您需要 rowClass 改为一个方法，并从模板传入 dateEvents。

该主题的其他变体可用:https://v2.vuejs.org/v2/guide/class-and-style.html