溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
很多時候Web在運行時要更改元素的CSS類名。但是在改變類名時，有時最好是有條件地應用樣式。例如你有一個翻頁的效果。翻頁效果通常有一個高亮的效果，用于向用戶顯示當前頁，這對于用戶而言是很有幫助的。該項目的樣式是有條件設置的，基于當前正在查看的頁面。
翻頁常見的一個效果看起來像下面這樣：
在這個示例中，共有五頁，每次只選擇其中一個頁面。如果你用Bootstrap構建一個分頁器，那么所選的頁面將有一個名為 active 的CSS類名應用在列表項中。如果頁面是當前瀏覽的頁面，那么你希望該類被應用。換句話說，你希望有條件地應用 active 類名。在Vue中，提供了一種方法，可以有條件地將CSS類應用于元素。在接下來的內容中將向大家展示這種技術。
要在運行時有條件地應用CSS類，需要綁定到一個JavaScript對象。要成功完成這個任務，必須完成兩個步驟。首先，必須確保定義了CSS類名，然后在模板中創建類綁定。在本文的其他部分，我將詳細解釋這些步驟。
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類名
讓我們重新構建步驟一中的代碼。當在模板中創建類綁定時，有兩個主要的選擇：使用對象語法或使用數組語法。接下來的內容，我將向你展示如何使用這兩種方法。
使用對象語法
要使用對象語法創建類綁定，必須使用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 指令 。這個指令用于在循環中渲染項目。這個例子中的項目就是頁面本身。除了使用 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對象中的屬性名。與這些屬性名稱關聯的值是JavaScript表達式。如果表達式值為 true ，則將包括CSS類名。如果表達式值為 false ，則不包括CSS類。有了這些規則，我們來看看每個屬性。
第一個屬性 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 類的另一種方法是綁定到一個數組。
使用數組語法
Vue允許通過綁定到一個數組給列表添加CSS類名。如果你想使用數組語法，步驟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>
和上一個示例的區別就是類綁定上使用數組。這種替代方法需要在 data 對象中添加兩個額外的屬性。這兩個屬笥是 pageItemClass 和 activeClass 。更新Vue初始化的代碼：
var app = new Vue({
el: '#myApp',
data: {
totalPages: 5,
currentPage: 3,
pageItemClass: 'page-item',
activeClass: 'active'
}
});
正如你看到了， data 對象變了，雖然 data 對象大小變大了，但是使用數組語法時，模板中的代碼稍微干凈一些。對象語法更緊湊一些。
對象語法和數組語法之間的選擇歸結為個人愛好。
這兩種方法都可能使你的HTML模板更加復雜。然而，實際上還有更多的事情發生。在實現中，我們正在關注如何分離。我們正在創建一個由數據驅動的模板。這使用的視圖更容易測試，并且在應用程序變大時更容易維護。
總結
我希望你覺得這篇文章很有價值。如果你想了解更多關于Vue的知識。我希望你能看看我創建的 教程 。我相信你會發現它很有價值，不管你是剛學習Vue還是使用Vue工作了一段時間。如果你覺得有什么不對，或者有更好的經驗或建議，歡迎在下面的評論中與我一起分享。
本文根據 @Chad Campbell 的《 Conditionally Applying a CSS Class in Vue.js 》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處: https://www.sitepoint.com/conditionally-applying-css-class-vue-js/ 。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
