javascript - 如何根据变量Vue JS的值更改html文本的颜色

我创建了一个显示具有阈值限制值的网页。现在，我想更改值的颜色（如果值超过阈值），但是我不知道如何继续。

如果超出了consulting.objectifs.TRS（JS文件）的值，我想用红色显示consulting.indicateurs.TRS。

window.onload = function() {
var consultation = new Vue({
    el: "#consultation",
    data: {
      indicateurs: {
        TRS: 0
      },
      objectifs: {
        TRS: 90,
      }
    },
    filtres: {
      machine: null,
      startDate: null,
      startHour: null,
      endDate: null,
      endHour: null
    },
    methods: {
      load: function() {
        this.$http.get("/data?startDate=" + this.filtres.startDate + " " + this.filtres.startHour + "&endDate=" + this.filtres.endDate + " " + this.filtres.endHour).then(function(response) {
            consultation.indicateurs = response.body[0];
            console.log(consultation.indicateurs);
            this.$forceUpdate();
          }
        });
    }
  }
  else {
    this.$http.get("/data?startDate=" + this.filtres.startDate + " " + this.filtres.startHour + "&endDate=" + this.filtres.endDate + " " + this.filtres.endHour).then(function(response) {
      if (!response.body[0]) {
        consultation.seen = true;
        consultation.message = "La requête n'a pas pu aboutir";
      } else {
        consultation.indicateurs = response.body[0];
        this.$forceUpdate();
      }
    });
  }
})
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="filtres">
  <input type="date" name="startDate" min="2019-11-29"  v-model="filtres.startDate">
  <input type="time" name="startHour" v-model="filtres.startHour">
  <input type="date" name="endDate" min="2019-11-29" v-model="filtres.endDate">
  <input type="time" name="endHour" v-model="filtres.endHour">
  <button v-on:click="load()">Appliquer les filtres</button>
  <button>Effacer les filtres</button>
</div>

<section id="cartes">
  <div id="trs" class="card">
    <h3>TRS</h3>
    <p>{{ indicateurs.TRS }} %</p>
    <p>{{ objectifs.TRS }} %</p>
  </div>
</section>

最佳答案

您可以使用条件类。

例：

<div v-bind:class="{ active: isActive }"></div>

“活动”是您的班级（文本危险或其他危险），而isActive是触发该班级的条件。