如果值小于或大于 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";
},
如何根据元素的值是否大于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";
},