在Vue.js中條件應(yīng)用CSS類的方法詳解

核心要點:

• 在Vue.js中，可以通過綁定JavaScript對像到class屬性來實現(xiàn)CSS類的條件應(yīng)用。對象的屬性對應(yīng)CSS類名，其值為JavaScript表達式，決定是否應(yīng)用該類。
• Vue.js提供兩種語法來創(chuàng)建類綁定：對象語法和數(shù)組語法。對象語法更簡潔，而數(shù)組語法可能使模板代碼更清晰。選擇哪種語法取決於個人偏好。
• Vue.js支持多種條件類綁定的方法，包括使用三元運算符、對象語法綁定多個類、使用計算屬性、組合靜態(tài)和綁定類以及條件綁定內(nèi)聯(lián)樣式。

有時需要在運行時更改元素的CSS類。但更改類時，有時最好有條件地應(yīng)用樣式細(xì)節(jié)。例如，假設(shè)您的視圖有一個分頁器。分頁器通常用於導(dǎo)航較大的項目集。導(dǎo)航時，顯示當(dāng)前頁面的信息對用戶很有幫助。項目樣式根據(jù)當(dāng)前查看的頁面有條件地設(shè)置。在這種情況下，分頁器可能如下所示：

此示例中有五個頁面，一次只能選擇一個頁面。如果使用Bootstrap構(gòu)建此分頁器，則選定的頁面將應(yīng)用名為active的CSS類。只有當(dāng)頁面是當(dāng)前查看的頁面時，才需要應(yīng)用此類。換句話說，需要有條件地應(yīng)用active CSS類。幸運的是，Vue提供了一種方法可以在運行時有條件地將CSS類應(yīng)用於元素，我將在本文中演示。

要在運行時有條件地應(yīng)用CSS類，可以綁定到JavaScript對象。要成功完成此任務(wù)，必須完成兩個步驟。首先，必須確保已定義CSS類。然後，在模板中創(chuàng)建類綁定。我將在本文其餘部分詳細(xì)解釋這些步驟。

步驟1：定義CSS類

假設(shè)上面圖像中顯示的五個頁面項目使用以下HTML定義：

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

請注意，此代碼片段中的每個頁面都有一個列表項元素（第3個列表項元素具有active類）?？梢圆碌?，這是想要有條件應(yīng)用的CSS類。為此，需要添加一個JavaScript對象。

步驟2：創(chuàng)建類綁定

在模板中創(chuàng)建類綁定時，主要有兩種選擇：使用對象語法或使用數(shù)組語法。我將在本文的其餘部分展示如何使用這兩種方法。

使用對象語法綁定

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

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

通過使用Vue內(nèi)置的v-for指令減少了代碼量。此指令用於循環(huán)渲染項目。此示例中的項目是頁面本身。除了使用v-for指令外，還要注意v-bind指令的使用。 v-bind指令將元素的class屬性連接到Vue實例。 Vue實例定義如下：

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="{'page-item':true, 'active':(page === currentPage)}">
        <a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

此Vue實例非常簡單。上面的data對象包含一個名為currentPage的屬性。如果重新查看上面定義的HTML模板，就會注意到正在引用此屬性。事實上，與每個類綁定關(guān)聯(lián)的JavaScript對像如下所示：

var app = new Vue({
  el: 'http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});

此對象定義了兩個屬性：page-item和active。值得注意的是，這些是步驟1中討論的兩個CSS類名。在步驟2中，這兩個類引用已成為JavaScript對像中的屬性名。與這些屬性名關(guān)聯(lián)的值是JavaScript表達式。如果表達式的計算結(jié)果為真值，則將包含CSS類。如果表達式的計算結(jié)果為false，則不會包含CSS類?？紤]到這些規(guī)則，讓我們看看每個屬性。第一個屬性page-item的值為true。此硬編碼值用於因為始終需要包含page-item類。第二個屬性active使用JavaScript表達式。當(dāng)此表達式為true時，將應(yīng)用active類。這使我們能夠根據(jù)currentPage的值有條件地應(yīng)用active類。另一種有條件地應(yīng)用active類的方法是綁定到數(shù)組。

使用數(shù)組語法綁定

Vue允許通過綁定到數(shù)組來應(yīng)用CSS類的列表。如果要使用數(shù)組語法，步驟1中顯示的HTML將變?yōu)椋?/p>

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

使用數(shù)組語法的運行版本。唯一的區(qū)別是在類綁定上使用了數(shù)組。這種替代方法需要在Vue的data對像中存在另外兩個屬性。這兩個屬性是：pageItemClass和activeClass。包含這些屬性的更新後的Vue初始化代碼如下所示：

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="[pageItemClass, (page === currentPage) ? activeClass : '']">
        <a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

如您所見，data對象的大小增加了，但是使用數(shù)組語法時，模板中的代碼略微簡潔一些。對象語法更緊湊一些。對象語法和數(shù)組語法之間的選擇取決於個人喜好。這兩種方法似乎都會使HTML模板更複雜。但是，這裡實際上還有更多內(nèi)容。實際上，我們正在分離關(guān)注點。我們正在創(chuàng)建一個由數(shù)據(jù)驅(qū)動的模板。這使得視圖更容易測試，並且隨著應(yīng)用程序的增長更容易維護。

總結(jié)

希望本文對您有所幫助。如果您想了解有關(guān)Vue.js的更多信息，可以查看SitePoint上的其他Vue內(nèi)容。

(以下為原文中FAQ部分的偽原創(chuàng)，保持了原意但改寫了表達方式)

Vue.js條件應(yīng)用CSS類的常見問題解答

如何使用三元運算符進行條件類綁定？

在Vue.js中，可以使用三元運算符進行條件類綁定。這是一種簡單有效的方法，可以根據(jù)條件在兩個類之間切換。示例如下：

<div :class="condition ? 'classA' : 'classB'"></div>

在此示例中，如果條件為真，則應(yīng)用classA；如果條件為假，則應(yīng)用classB。條件可以是任何有效的JavaScript表達式。

如何在Vue.js中條件綁定多個類？

Vue.js允許使用對象語法有條件地綁定多個類。當(dāng)需要根據(jù)不同的條件應(yīng)用多個類時，這非常有用。示例如下：

<div :class="{ 'classA': conditionA, 'classB': conditionB }"></div>

在此示例中，如果conditionA為真，則應(yīng)用classA；如果conditionB為真，則應(yīng)用classB。 conditionA和conditionB都可以是任何有效的JavaScript表達式。

能否在Vue.js中使用計算屬性進行條件類綁定？

是的，可以在Vue.js中使用計算屬性進行條件類綁定。當(dāng)確定類的邏輯很複雜時，計算屬性非常有用。示例如下：

<div :class="computedClass"></div>

在Vue實例中，將computedClass定義為計算屬性：

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

在此示例中，computedClass計算屬性將根據(jù)其中定義的複雜邏輯返回類名。

如何在Vue.js中組合靜態(tài)類和綁定類？

在Vue.js中，可以組合靜態(tài)類和綁定類。當(dāng)需要始終應(yīng)用某個類，但也需要有條件地應(yīng)用其他類時，這非常有用。示例如下：

<div :class="['staticClass', { 'classA': conditionA, 'classB': conditionB }]"></div>

在此示例中，staticClass將始終應(yīng)用，classA和classB將分別根據(jù)conditionA和conditionB應(yīng)用。

如何在Vue.js中條件綁定內(nèi)聯(lián)樣式？

Vue.js允許使用對象語法有條件地綁定內(nèi)聯(lián)樣式。當(dāng)需要根據(jù)條件應(yīng)用某些樣式時，這非常有用。示例如下：

<div :style="{ color: conditionA ? 'red' : 'blue', fontSize: conditionB ? '12px' : '16px' }"></div>

在此示例中，如果conditionA為真，則顏色為紅色；如果conditionA為假，則顏色為藍色。同樣，如果conditionB為真，則字體大小為12px；如果conditionB為假，則字體大小為16px。

以上是如何有條件地在vue.js中應(yīng)用CSS類的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！