vue二种方式根据条件判断显示不同样式

实现效果,当item为0时,字体颜色显示蓝色,否则显示橙色

1.v-if-v-else/v-show的方式,只显示其中之一
#v-if v-else

<div class="blue" v-if="item.num == '0'">{
    
    {
    
     item.num }}</div>
<div class="orange" v-else>{
    
    {
    
     item.num }}</div>

#v-show

<div class="blue" v-show="item.num == '0'">{
    
    {
    
     item.num }}</div> 
<div class="orange" v-show="item.num !== '0'">{
    
    {
    
     item.num }}</div>

2.条件判断类
判断class

<div :class="item.num == '0' ? 'blue' : 'orange'">{
    
    {
    
     item.num }}</div>
.blue {
    
    
        color: #11b4ff;     
       }     
.orange {
    
             
        color: #ff9d4a;     
        } 

判断style

<div class="blue" :style="item.num == '0' ? 'color:#11b4ff;' : 'color:#ff9d4a;'">{
    
    {
    
     item.num }}</div>

猜你喜欢

转载自blog.csdn.net/weixin_42504805/article/details/132906926