Vue.js 动态类名？

我需要根据评论等级进行颜色降级。我希望在 Vue.js 中完成一些事情，如下所示：

<div class="review" :style="reviewColor(hotel.average)">

在我的方法中我有这样的东西：

reviewColor() {
    return 'green';
}

不幸的是，这并没有为我提供'green'班级。我希望在该方法中进行颜色计算。

如果等级低于 7，则需要为特定颜色；如果等级在 7 到 8 之间且高于 8，则需要为特定颜色。

我需要以干净的方式进行这些计算。还有其他选择吗？

我无法内联它，因为我有 2 个元素需要响应类。

不幸的是，这并没有为我提供“绿色”class.

你需要绑定到class, not style:

<div class="review" :class="reviewColor(hotel.average)">

reviewColor(grade) {
  if (grade < 7) {
    return 'red';
  } else if (grade < 9) {
    return 'yellow';
  } else {
    return 'green';
  }
}