很多時(shí)候Web在運(yùn)行時(shí)要更改元素的CSS類名。但是在改變類名時(shí)，有時(shí)最好是有條件地應(yīng)用樣式。例如你有一個(gè)翻頁(yè)的效果。翻頁(yè)效果通常有一個(gè)高亮的效果，用于向用戶顯示當(dāng)前頁(yè)，這對(duì)于用戶而言是很有幫助的。該項(xiàng)目的樣式是有條件設(shè)置的，基于當(dāng)前正在查看的頁(yè)面。

成都創(chuàng)新互聯(lián)公司基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務(wù)器托管雅安報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。

翻頁(yè)常見的一個(gè)效果看起來(lái)像下面這樣：

在這個(gè)示例中，共有五頁(yè)，每次只選擇其中一個(gè)頁(yè)面。如果你用Bootstrap構(gòu)建一個(gè)分頁(yè)器，那么所選的頁(yè)面將有一個(gè)名為 active 的CSS類名應(yīng)用在列表項(xiàng)中。如果頁(yè)面是當(dāng)前瀏覽的頁(yè)面，那么你希望該類被應(yīng)用。換句話說(shuō)，你希望有條件地應(yīng)用 active 類名。在Vue中，提供了一種方法，可以有條件地將CSS類應(yīng)用于元素。在接下來(lái)的內(nèi)容中將向大家展示這種技術(shù)。

要在運(yùn)行時(shí)有條件地應(yīng)用CSS類，需要綁定到一個(gè)JavaScript對(duì)象。要成功完成這個(gè)任務(wù)，必須完成兩個(gè)步驟。首先，必須確保定義了CSS類名，然后在模板中創(chuàng)建類綁定。在本文的其他部分，我將詳細(xì)解釋這些步驟。

Step1: 定義你的CSS類名

想象一下，在一段時(shí)間內(nèi)，上面圖像中顯示的五個(gè)頁(yè)面薦是使用像下面的HTML代碼構(gòu)建的：

注意：這個(gè)代碼片段中每個(gè)列表項(xiàng) li 表示的就是每個(gè)頁(yè)面。改元素引用了 page-item 類名。在這段代碼中，使用的是Bootstrap的CSS框架。然而，如果沒(méi)有定義，那么確保它在某個(gè)地方被定義了。不過(guò)，第二個(gè)CSS類是與本文最相關(guān)的類。

active 的CSS類名用于標(biāo)識(shí)當(dāng)前選定的頁(yè)面。在本文中，這個(gè)CSS類也是在Bootstrap框架中常用的。如上面的代碼片段所示， active 類只在第三個(gè)列表項(xiàng)元素中使用。你可能會(huì)猜到，這是你想有條件地應(yīng)用的CSS類。要做到這一點(diǎn)，你需要添加一個(gè)JavaScript對(duì)象。

Step2: 綁定你的CSS類名

讓我們重新構(gòu)建步驟一中的代碼。當(dāng)在模板中創(chuàng)建類綁定時(shí)，有兩個(gè)主要的選擇：使用對(duì)象語(yǔ)法或使用數(shù)組語(yǔ)法。接下來(lái)的內(nèi)容，我將向你展示如何使用這兩種方法。

使用對(duì)象語(yǔ)法

要使用對(duì)象語(yǔ)法創(chuàng)建類綁定，必須使用JavaScript表達(dá)式。我們將使用的表達(dá)式可以在文中代碼里可以看到。相關(guān)代碼如下：

為了減少代碼量，在這里使用了Vue中的 v-for 指令 。這個(gè)指令用于在循環(huán)中渲染項(xiàng)目。這個(gè)例子中的項(xiàng)目就是頁(yè)面本身。除了使用 v-for 指令之外，還使用了 v-bind 指令。

v-bind 指令將元素的類屬性綁定到Vue的實(shí)例。Vue的實(shí)例是這樣定義的：

var app = new Vue({
  el: '#myApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});

這個(gè)Vue實(shí)例上面的 data 對(duì)象包括了一個(gè)名為 currentPage 的屬性。如果你重新訪問(wèn)上面定義的HTML模板，你將注意到該避屬性正在被引用。實(shí)際上，與每個(gè)類綁定相關(guān)的JavaScript對(duì)象看起來(lái)是這樣的：

{'page-item':true, 'active':(page === currentPage)}

該對(duì)象定義了兩個(gè)屬性： page-item 和 active 。值得注意的是，這些是步驟一中討論的兩個(gè)CSS類的名稱。在步驟2中，這兩個(gè)類引用已經(jīng)成為JavaScript對(duì)象中的屬性名。與這些屬性名稱關(guān)聯(lián)的值是JavaScript表達(dá)式。如果表達(dá)式值為 true ，則將包括CSS類名。如果表達(dá)式值為 false ，則不包括CSS類。有了這些規(guī)則，我們來(lái)看看每個(gè)屬性。

第一個(gè)屬性 page-item 有一個(gè) true 值。這個(gè)硬編碼的值被使用，因?yàn)槲覀兛偸窍胍?page-item 類。第二個(gè)屬性是 active ，它使用一個(gè)JavaScript表達(dá)式。當(dāng)此表達(dá)式為 true 時(shí)，將應(yīng)用 active 類。這使用我們可以根據(jù) currentPage 的值有條件地應(yīng)用 active 類。

body {
 width: 100vw;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

.pagination {
 justify-content: center;
}

每次修改 currentPage 的值， active 就會(huì)應(yīng)用其對(duì)應(yīng)的列表項(xiàng)中。比如下圖效果：

有條件地應(yīng)用 active 類的另一種方法是綁定到一個(gè)數(shù)組。

使用數(shù)組語(yǔ)法

Vue允許通過(guò)綁定到一個(gè)數(shù)組給列表添加CSS類名。如果你想使用數(shù)組語(yǔ)法，步驟1中的HTML結(jié)構(gòu)需要進(jìn)行調(diào)整，修改后的代碼如下：

和上一個(gè)示例的區(qū)別就是類綁定上使用數(shù)組。這種替代方法需要在 data 對(duì)象中添加兩個(gè)額外的屬性。這兩個(gè)屬笥是 pageItemClass 和 activeClass 。更新Vue初始化的代碼：

var app = new Vue({
  el: '#myApp',
  data: {
    totalPages: 5,
    currentPage: 3,
    pageItemClass: 'page-item',
    activeClass: 'active'
  }
});

正如你看到了， data 對(duì)象變了，雖然 data 對(duì)象大小變大了，但是使用數(shù)組語(yǔ)法時(shí)，模板中的代碼稍微干凈一些。對(duì)象語(yǔ)法更緊湊一些。

對(duì)象語(yǔ)法和數(shù)組語(yǔ)法之間的選擇歸結(jié)為個(gè)人愛(ài)好。

這兩種方法都可能使你的HTML模板更加復(fù)雜。然而，實(shí)際上還有更多的事情發(fā)生。在實(shí)現(xiàn)中，我們正在關(guān)注如何分離。我們正在創(chuàng)建一個(gè)由數(shù)據(jù)驅(qū)動(dòng)的模板。這使用的視圖更容易測(cè)試，并且在應(yīng)用程序變大時(shí)更容易維護(hù)。

總結(jié)

我希望你覺(jué)得這篇文章很有價(jià)值。如果你想了解更多關(guān)于Vue的知識(shí)。我希望你能看看我創(chuàng)建的 教程 。我相信你會(huì)發(fā)現(xiàn)它很有價(jià)值，不管你是剛學(xué)習(xí)Vue還是使用Vue工作了一段時(shí)間。如果你覺(jué)得有什么不對(duì)，或者有更好的經(jīng)驗(yàn)或建議，歡迎在下面的評(píng)論中與我一起分享。

本文根據(jù) @Chad Campbell 的《 Conditionally Applying a CSS Class in Vue.js 》所譯，整個(gè)譯文帶有我們自己的理解與思想，如果譯得不好或有不對(duì)之處還請(qǐng)同行朋友指點(diǎn)。如需轉(zhuǎn)載此譯文，需注明英文出處: https://www.sitepoint.com/conditionally-applying-css-class-vue-js/ 。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。