Is there a way for me to apply dynamic styling based on the result within my div?
I have created a function that calculates a total number and updates the data property to display either 'Low' or 'Good' depending on the count.
I have defined two classes for styling:
.good-result {
color: green;
font-weight: bold;
}
.poor-result {
color: orange;
font-weight: bold;
}
My current implementation of dynamic styling is as follows:
<div class="resultValue">Water intake: <span :class="'Low'?'poor-result' : 'good-result'">{{ resultsWater }}</span></div>
The issue I am facing is that it always applies the .poor-result style, regardless of whether the value in the div is 'Low' or 'Good'.