How can I dynamically add css classes to the <div class="coin__row-text"> elements based on whether or not the value of the element is greater than 0?

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>