无法使我的动态CSS与Vue.js一起工作

我有没有办法根据div中的结果添加动态样式

我创建了一个函数，该函数将计算一个总数，然后根据计数的不同，将数据属性更改为返回“低”或“好”

我创建了两个不同的类：

.good-result {
  color: green;
  font-weight: bold;
}
.poor-result {
  color: orange;
  font-weight: bold;
}

我的动态样式如下所示

<div class="resultValue">Water intake: <span :class="'Low'?'poor-result' : 'good-result'">{{ resultsWater }}</span></div>

取水口：{{resultsWater}

---

如果数据属性resultsWater显示'Low'，我想尝试应用.poor result样式。其他.good result属性，当前它只显示.poor result，无论divs值是'Low'还是'good'

尝试使用字符串插值并将

resultsWater

与

'Low'进行比较：

 :class="`${resultsWater === 'Low'?'poor-result' : 'good-result'}">

所有非空字符串都是真实的，因此
'Low'
的计算结果将始终为true。