Vue.js动态类名？

Question

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

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

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

reviewColor() {
    return 'green';
}

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

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

I need these calculations in a clean matter. Is there any alternative?

I can't inline it because I have 2 elements that need to respond to a class.

Answer 1

Unfortunately this does not provide me with a 'green' class.

You need to bind to 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';
  }
}