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

Question

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

我想在超过consultation.objectifs.TRS(JS文件)的值时将consultation.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>

Answer 1

您可以使用条件类。

示例:

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

其中“active”是您的类别(文本危险或其他任何内容)，isActive 是触发该类别的条件。