Vue.js dynamischer Klassenname?

Question

Ich brauche eine Farbverschlechterung abhängig von einer Bewertung. Ich habe gehofft, etwas in Vue.js wie dies getan zu bekommen:

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

Und in meinen Methoden, die ich so etwas wie diese:

reviewColor() { 
    return 'green'; 
} 

Leider ist dies mich nicht mit einer 'green' Klasse bietet. Ich hatte gehofft, meine Farbberechnung in der Methode zu machen.

Wenn der Grad weniger als 7 braucht es eine bestimmte Farbe sein, wenn zwischen 7 und 8 und höher als 8.

ich diese Berechnungen in einer sauberen Angelegenheit benötigen. Gibt es eine Alternative?

Ich kann es nicht inline, weil ich 2 Elemente habe, die auf eine Klasse reagieren müssen.

Answer 1

Leider liefert mir das keine "grüne" Klasse.

Sie müssen class binden, nicht style:

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

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