Vue.js动态类名？

Question

我需要根据评论等级降低颜色。我希望能在Vue.js中完成一些事情：

Button

在我的方法中，我有类似的东西：

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

不幸的是，这并没有为我提供reviewColor() { return 'green'; } 课程。我希望在方法中进行颜色计算。

如果等级小于7，则需要为特定颜色，如果介于7和8之间且高于8。

我需要在干净的事情中进行这些计算。还有其他选择吗？

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

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';
  }
}