javascript - 有条件地更改类 vue.js

Question

我有一张表，我想根据值更改类别。

我的第一个方法是使用 v-bind:class="{} 如果为真，这将更改为正确的类。但是这样做我应该为表中的每个值创建新元素这看起来不是最好的选择。

有没有办法使用条件，例如 if {{value}} > 5 class:something

我写了一个小jsfiddle我现在是如何让它工作的。这个想法是表中的每个元素都将遵循这些规则，而不需要为每个单元格编写 if 语句:

  if (this.v1 < 4) {
    this.goodBox = true
  } else if (this.v1 < 6) {
    this.goodBox = true
  } else {
    this.badBox = true
  }

Answer 1

我对你的意图做了一些猜测，但类似这样。

changeClass(value) {
  return {
    'good_box': value <= 4,
    'medium_box': value > 4 && value <= 6,
    'bad_box': value > 6
  }
}

模板

<table style="width:100%; border:1px solid black">
  <tr>
    <td :class="changeClass(v1)">{{v1}}</td>
    <td :class="changeClass(v2)">{{v2}}</td>
  </tr>
  <tr>
    <td :class="changeClass(v3)">{{v3}}</td>
    <td :class="changeClass(v4)">{{v4}}</td>
  </tr>
</table>

已更新fiddle .