How to change color of html text depending on the value of a variable Vue JS

Question

I created a web page that display values with threshold limit. Now I would like to change the color of values if they exceed the threshold but I don't know how to proceed.

I would like to display consultation.indicateurs.TRS in red when it exceed the value of consultation.objectifs.TRS (JS file).

 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

You can use conditional class.

Example:

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

Where 'active' is your class (text-danger or whatever it is) and isActive is the condition that will trigger that class.