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

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

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

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

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

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

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

Step1: 定義你的CSS類名

想象一下，在一段時間內，上面圖像中顯示的五個頁面薦是使用像下面的HTML代碼構建的：

<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>

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

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

Step2: 綁定你的CSS類名

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

使用對象語法

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

<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 指令。這個指令用于在循環(huán)中渲染項目。這個例子中的項目就是頁面本身。除了使用 v-for 指令之外，還使用了 v-bind 指令。

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

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

這個Vue實例上面的 data 對象包括了一個名為 currentPage 的屬性。如果你重新訪問上面定義的HTML模板，你將注意到該避屬性正在被引用。實際上，與每個類綁定相關的JavaScript對象看起來是這樣的：

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

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

第一個屬性 page-item 有一個 true 值。這個硬編碼的值被使用，因為我們總是想要包括 page-item 類。第二個屬性是 active ，它使用一個JavaScript表達式。當此表達式為 true 時，將應用 active 類。這使用我們可以根據 currentPage 的值有條件地應用 active 類。

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

.pagination {
 justify-content: center;
}

每次修改 currentPage 的值， active 就會應用其對應的列表項中。比如下圖效果：

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

使用數(shù)組語法

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

<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>

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

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

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

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

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

總結

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: