1.使用:class给元素添加动态值
<span class="pdl-10" :class="addClass(value)">
{{value<0?-(value):value}}
</span>
methods: {
addClass(diffValue){
if(diffValue>0){
return "arrow_up";
}else if(diffValue<0){
return "arrow_down";
}else {
return "";
}
},
}
2.使用v-if展示不同class
<span class="pdl-10 arrow_up" v-if="value>0">
{{value}}
</span>
<span class="pdl-10 " v-if="value==0">
{{value}}
</span>
<span class="pdl-10 arrow_down" v-if="value<0">
{{-(value)}}
</span>
3.使用三目运算符
<span class="pdl-10" :class="value>0?'arrow_up':(value===0?'':'arrow_down')">
{{value<0?-(value):value}}
</span>