VueJS – How do I dynamically add CSS classes to HTML elements if value is less or greater than 0?

i’m trying to dynamically add css classes to the elements based on whether or not the value of the element is greater than 0. My coding knowledge is very limited and i’ve exhausted all avenues. Thanks in advanced for any help!

HTML

<template> <div class="coin-block-wrapper">
        <div class="coin__wrapper">
          <div v-for="(value, key) in coins" :key="value" class="coin__row">
            <div class="coin__row-div">
              <img src="{{ }}" class="coin__row-logo">
              <div class="coin-name">{{key}}</div>
              <div class="coin-name">USDT</div>
            </div>
            <div class="coin__row-div-large">
              <div id="coin__row-small-div">
                <div class="coin__row-text">{{value.USD.PRICE}}</div>
                <div class="coin__row-text">{{value.BTC.PRICE}}</div>
              </div>
              <div id="coin__row-small-div">
                <div class="coin__row-text">{{value.USD.CHANGEPCTHOUR}}%</div>
                <div class="coin__row-text">{{value.BTC.CHANGEPCTHOUR}}%</div>
              </div>
            </div>
          </div>
        </div> </div>

</template>

Styles

<style scoped>
      .positive {
        color: green;
      }
    
      .negative {
        color: red;
      }
    </style>

>Solution :

You should try binding class.
Something like that:

<div :class="getDivClasses(value.USD.PRICE)">

and inside methods:

getDivClasses(value) {
  return value > 0 ? "positive" : "negative";
},