快捷導(dǎo)航

詳解在Vue中有條件地使用CSS類

更新時(shí)間：2017年09月30日 09:56:47 作者：Airen

本篇文章主要介紹了詳解在Vue中有條件地使用CSS類，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

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

Step1: 定義你的CSS類名

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

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2</a></li>
      <li class="page-item active"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4</a></li>
      <li class="page-item"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >5</a></li>
    </ul>
  </nav>
</div>

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

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

Step2: 綁定你的CSS類名

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

使用對象語法

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

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" v-bind:class="{'page-item':true, 'active':(page === currentPage)}">
      <a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ page }}</a>
    </li>
    </ul>
  </nav>
</div>

為了減少代碼量，在這里使用了Vue中的 v-for 指令。這個(gè)指令用于在循環(huán)中渲染項(xiàng)目。這個(gè)例子中的項(xiàng)目就是頁面本身。除了使用 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 對象包括了一個(gè)名為 currentPage 的屬性。如果你重新訪問上面定義的HTML模板，你將注意到該避屬性正在被引用。實(shí)際上，與每個(gè)類綁定相關(guān)的JavaScript對象看起來是這樣的：

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

該對象定義了兩個(gè)屬性： page-item 和 active 。值得注意的是，這些是步驟一中討論的兩個(gè)CSS類的名稱。在步驟2中，這兩個(gè)類引用已經(jīng)成為JavaScript對象中的屬性名。與這些屬性名稱關(guān)聯(lián)的值是JavaScript表達(dá)式。如果表達(dá)式值為 true ，則將包括CSS類名。如果表達(dá)式值為 false ，則不包括CSS類。有了這些規(guī)則，我們來看看每個(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 就會應(yīng)用其對應(yīng)的列表項(xiàng)中。比如下圖效果：

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

使用數(shù)組語法

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

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" v-bind:class="[pageItemClass, (page === currentPage) ? activeClass : '']"> 
      <a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

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

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

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

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

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

總結(jié)

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: