直播系統原始碼，vue二種方式根據條件判斷顯示不同樣式

直播系統原始碼，vue二種方式根據條件判斷顯示不同樣式

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>

以上就是直播系統原始碼，vue二種方式根據條件判斷顯示不同樣式， 更多內容歡迎關注之後的文章