Vue.js動的クラス名？

Question

レビューグレードによっては色の劣化が必要です。

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

そして、私の方法で私はこのようなものがあります：

reviewColor() { 
    return 'green'; 
} 

残念ながら、これは'green'クラスで私を提供していませんが、私は何かがそうのようVue.jsで行わ取得するために期待していました。この方法で色の計算をしたいと思っていました。

グレードが7未満の場合は7と8と8

よりも高い間、私はクリーンな問題でこれらの計算を必要とする場合には、特定の色にする必要があります。何か別の選択肢はありますか？

クラスに応答する必要がある2つの要素があるため、インライン化できません。

Answer 1

残念ながら、これは私に「緑色」クラスを提供しません。

あなたはstyle、classにバインドする必要はありません。

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

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