一、要想使用Vue.js實(shí)現(xiàn)v-if和v-else來(lái)切換CSS樣式，有兩種實(shí)現(xiàn)方式：

比如我們想給一個(gè)div設(shè)置兩個(gè)不同的背景顏色（當(dāng)status為1的時(shí)候，我們?cè)O(shè)置背景為紅色，當(dāng)status狀態(tài)為2的時(shí)候我們?cè)O(shè)置背景為藍(lán)色）：

.back-red{ /* 紅色背景 */width: 100px;height: 100px;background-color: red; } .back-blue{ /* 藍(lán)色背景 */width: 100px;height: 100px;background-color: blue; }

1、第一種可以使用 v-if 和 v-else來(lái)寫兩條div元素，然后在兩個(gè)元素上分別設(shè)置一個(gè)不同的class來(lái)實(shí)現(xiàn)不同的樣式：

<div v-if=" status == '1' " :class="back-red"></div> <div v-if=" status == '2' " :class="back-blue"></div>

2、第二種使用三元表達(dá)式結(jié)合:class直接在一個(gè)div上判斷并切換class：（如果狀態(tài)有多個(gè)也可以再后面使用三元表達(dá)式嵌套）

<div :class="status == '1'? 'back-red' : 'back-blue'"></div>

上面兩種方式各有各的好處，看自己的習(xí)慣選擇。

二、寫一個(gè)簡(jiǎn)單的demo記錄一下：

1、先簡(jiǎn)單的說(shuō)明一下，頁(yè)面中展示幾條信息，然后這里面有一個(gè)處理狀態(tài)，當(dāng)處理狀態(tài)為3（待派單）的時(shí)候，就顯示修改預(yù)約按鈕，如果處理狀態(tài)為4（已派單）則不顯示修改預(yù)約按鈕。

2、我們是使用一個(gè)大的div將三個(gè)按鈕包裹住，然后通過(guò)calc()函數(shù)來(lái)設(shè)置一個(gè)margin-left，使三個(gè)按鈕來(lái)靠右：
當(dāng)有三個(gè)按鈕的時(shí)候可以使用：設(shè)置左外邊距為：calc(用100% - 三個(gè)按鈕的寬度 - 按鈕中間的距離)

.but_big_div{ /* 包裹按鈕div的 大的div */padding-right: 0px;margin-left: calc(100% - 248px); }

?當(dāng)顯示兩個(gè)按鈕的時(shí)候使用：設(shè)置左外邊距為：calc(用100% - 兩個(gè)按鈕的寬度 - 按鈕中間的距離)

.but_big_div-s{ /* 包裹按鈕div的 大的div */padding-right: 0px;margin-left: calc(100% - 168px); }

我們這里通過(guò)三元表達(dá)式的方式來(lái)實(shí)現(xiàn)，首先通過(guò)v-for循環(huán)獲取數(shù)據(jù)并進(jìn)行判斷該條記錄中status的狀態(tài)，如果status為待派單，那么我們將class綁定為but_big_div，如果已派單則直接綁定為but_big_div-s；

下面是通過(guò)v-if來(lái)判斷，如果status為待派單，則正常顯示該按鈕，如果status不是待派單，則將按鈕隱藏；
?

<div class="row" v-for="(site,index) in sites" :class="index == sites.length-1 ? 'row_bottom_s' : 'row_bottom'"><div class="col-xs-12 col-md-12"><div class="col-xs-12 col-md-12 txt_div"><p>聯(lián)系人：{{site.measurename}}</p><p>手機(jī)號(hào)碼：{{site.measurephone}}</p><p>安裝地址：{{site.measureaddress}}</p><p>上門時(shí)間：{{site.measuretime}}</p><p>處理狀態(tài)：{{site.status}}</p></div><div :class="site.status=='待派單'?'but_big_div' : 'but_big_div-s'"><div class="but_div"><img alt="圖片加載失敗" src="路徑" class="but_img" @click="updateAppoint(site)" v-if="site.status=='待派單'"/></div><div class="but_div"><img alt="圖片加載失敗" src="路徑" class="but_img" @click="showProgress(site)"/></div><div class="but_div"><img alt="圖片加載失敗" src="路徑" class="but_img" @click="showDetail(site)" /></div></div></div> </div>

轉(zhuǎn)自：https://blog.csdn.net/weixin_44296929/article/details/103768638

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Vue.js 实现v-if和v-else来切换CSS样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。