Vue樣式切換及三元判斷樣式是如何關(guān)聯(lián)的

發(fā)布時(shí)間：2020-08-10 09:54:42 來源：億速云閱讀：252 作者：小新欄目：開發(fā)技術(shù)

這篇文章主要介紹Vue樣式切換及三元判斷樣式是如何關(guān)聯(lián)的，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

假設(shè)有需求：

后臺返回狀態(tài)1:啟用，0：禁用

1、若要使啟用為綠色，禁用不添加其他樣式

 <el-table-column
  prop="statusName"
  align="center"
  label="狀態(tài)">
  <template slot-scope="scope">
  <div :class="{active:scope.row.status==1}">
  {{ scope.row.statusName }}
  </div>
  </template>
  </el-table-column>
 .active{
 color:green;
 }

1、若要使啟用為綠色，禁用為紅色，可使用三元表達(dá)式綁定樣式

 <el-table-column
  prop="statusName"
  align="center"
  label="狀態(tài)">
  <template slot-scope="scope">
  <div :class="scope.row.status==1&#63; 'active':'native'">
  {{ scope.row.statusName }}
  </div>
  </template>
  </el-table-column>
.active{
 color:green;
 }
 .native{
 color:red;
 }

補(bǔ)充知識：vue通過判斷寫樣式(v-bind)

如下所示：

v-bind:

以上是Vue樣式切換及三元判斷樣式是如何關(guān)聯(lián)的的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

Vue樣式切換及三元判斷樣式是如何關(guān)聯(lián)的

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽