Vue.js动态类名？

Question

根据评论等级，我需要颜色降级。我希望得到的东西在Vue.js做像这样：

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

而在我的方法，我有这样的事情：

reviewColor() { 
    return 'green'; 
} 

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

如果等级小于它需要一个特定的颜色，如果7和8高于8

之间

我在一个干净的事情需要这些计算7。有其他选择吗？

我不能内联它，因为我有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'; 
    } 
}