vue二种方式根据条件判断显示不同样式
实现效果,当item为0时,字体颜色显示蓝色,否则显示橙色1.v-if-v-else/v-show的方式,只显示其中之一#v-if v-else<divclass="blue"v-if="item.num=='0'">{{item.num}}</div><divclass="orange"v-else>{{item.num}}</div>#v-sho
·
实现效果,当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>
更多推荐
已为社区贡献2条内容
所有评论(0)