如何有條件地在vue.js中應用CSS類

在Vue.js中條件應用CSS類的方法詳解

核心要點:

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

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

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

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

步驟1：定義CSS類

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

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

請注意，此代碼片段中的每個頁面都有一個列表項元素（第3個列表項元素具有active類）。可以猜到，這是想要有條件應用的CSS類。為此，需要添加一個JavaScript對象。

步驟2：創建類綁定

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

使用對象語法綁定

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

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

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

<code class="language-html"><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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div></code>

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

<code class="language-javascript">var app = new Vue({
  el: 'https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});</code>

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

使用數組語法綁定

Vue允許通過綁定到數組來應用CSS類的列表。如果要使用數組語法，步驟1中顯示的HTML將變為：

<code class="language-javascript">{'page-item':true, 'active':(page === currentPage)}</code>

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

<code class="language-html"><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="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div></code>

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

總結

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

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

Vue.js條件應用CSS類的常見問題解答

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如何在Vue.js中組合靜態類和綁定類？

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

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

在此示例中，staticClass將始終應用，classA和classB將分別根據conditionA和conditionB應用。

如何在Vue.js中條件綁定內聯樣式？

Vue.js允許使用對象語法有條件地綁定內聯樣式。當需要根據條件應用某些樣式時，這非常有用。示例如下：

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

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

以上是如何有條件地在vue.js中應用CSS類的詳細內容。更多資訊請關注PHP中文網其他相關文章！