Использование тернарного условия внутри класса в Vue.js

Question

Как я могу написать троичное условие, чтобы изменить цвет этого индикатора выполнения, когда процент достигает 57

Так устанавливается код индикатора выполнения

<div
   class="progress-bar"
    role="progressbar"
    :style="{width:(quoteCount / maxQuotes) * 100 + '%'}"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100">
   {{quoteCount}} / {{maxQuotes}}
 </div>

..................

Итак, я хочу добавить класс progress-bar bg-danger, когда доберусь до 75%

Answer 1

Вам необходимо получить доступ к значению индикатора выполнения, поэтому в идеале вы должны v-model к некоторому значению данных, например progress.Тогда просто:

:class="progress > 75 ? 'bg-danger' : '' "