如果值小于或大于 0,如何将 CSS 类 动态添加到 HTML 元素?

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

如何根据元素的值是否大于0,动态添加css 类到<div class="coin__row-text">元素?

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>

样式:

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

您应该尝试绑定 class。 类似的东西:

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

和内部方法:

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