Vue.js 动态类名? [英] Vue.js dynamic class name?

问题描述

我需要根据评论等级进行颜色退化.我希望像这样在 Vue.js 中完成一些事情:

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

reviewColor() {返回绿色"；}

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

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

我需要以干净的方式进行这些计算.有什么办法吗?

我无法内联它，因为我有 2 个元素需要响应一个类.

解决方案

不幸的是，这并没有为我提供绿色"课程.

你需要绑定到class，而不是style:

reviewColor(grade) {如果(等级<7){返回红色"；} else if (等级 <9) {返回黄色"；} 别的 {返回绿色"；}}

I need a color degradation depending on a review grade. I was hoping to get something done in Vue.js like so:

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

And in my methods I have something like this:

reviewColor() {
    return 'green';
}

Unfortunately this does not provide me with a 'green' class. I was hoping to do my color calculation in the method.

If the grade is less than a 7 it needs to be a specific color, if between 7 and 8 and higher than 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.

解决方案

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

这篇关于Vue.js 动态类名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！