Vue.js动态类名？

Question

我需要根据评论等级来降低颜色。 我希望像这样在Vue.js中完成一些工作：

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

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

reviewColor() {
    return 'green';
}

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

如果等级小于7，则必须是特定的颜色，如果介于7到8之间并且高于8。

我需要这些计算方法。 有没有其他选择？

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

Answer 1

不幸的是，这并没有给我提供“绿色” 课程 。

您需要绑定到class ，而不是style ：

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

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