直播系统源代码，vue二种方式根据条件判断显示不同样式

直播系统源代码，vue二种方式根据条件判断显示不同样式

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

#v-if v-else

 

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

​

#v-show

 

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

 

2.条件判断类

判断class

 

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

 

判断style

 

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

 

以上就是直播系统源代码，vue二种方式根据条件判断显示不同样式， 更多内容欢迎关注之后的文章