一、要想使用Vue.js實現v-if和v-else來切換CSS樣式，有兩種實現方式：

比如我們想給一個div設置兩個不同的背景顏色（當status為1的時候，我們設置背景為紅色，當status狀態為2的時候我們設置背景為藍色）：

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

1、第一種可以使用 v-if 和 v-else來寫兩條div元素，然后在兩個元素上分別設置一個不同的class來實現不同的樣式：

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

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

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

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

二、寫一個簡單的demo記錄一下：

1、先簡單的說明一下，頁面中展示幾條信息，然后這里面有一個處理狀態，當處理狀態為3（待派單）的時候，就顯示修改預約按鈕，如果處理狀態為4（已派單）則不顯示修改預約按鈕。

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

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

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

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

我們這里通過三元表達式的方式來實現，首先通過v-for循環獲取數據并進行判斷該條記錄中status的狀態，如果status為待派單，那么我們將class綁定為but_big_div，如果已派單則直接綁定為but_big_div-s；

下面是通過v-if來判斷，如果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>聯系人：{{site.measurename}}</p><p>手機號碼：{{site.measurephone}}</p><p>安裝地址：{{site.measureaddress}}</p><p>上門時間：{{site.measuretime}}</p><p>處理狀態：{{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>

轉自：https://blog.csdn.net/weixin_44296929/article/details/103768638

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。