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

核心要點(diǎn):

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

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

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

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

步驟1：定義CSS類

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

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

請(qǐng)注意，此代碼片段中的每個(gè)頁(yè)面都有一個(gè)列表項(xiàng)元素（第3個(gè)列表項(xiàng)元素具有active類）。可以猜到，這是想要有條件應(yīng)用的CSS類。為此，需要添加一個(gè)JavaScript對(duì)象。

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

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

使用對(duì)象語(yǔ)法綁定

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

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

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

<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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

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

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

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

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

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

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

使用數(shù)組語(yǔ)法的運(yùn)行版本。唯一的區(qū)別是在類綁定上使用了數(shù)組。這種替代方法需要在Vue的data對(duì)象中存在另外兩個(gè)屬性。這兩個(gè)屬性是：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://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

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

總結(jié)

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

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

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

如何使用三元運(yùn)算符進(jìn)行條件類綁定？

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

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

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

如何在Vue.js中條件綁定多個(gè)類？

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

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

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

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

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

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

在Vue實(shí)例中，將computedClass定義為計(jì)算屬性：

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

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

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

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

<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允許使用對(duì)象語(yǔ)法有條件地綁定內(nèi)聯(lián)樣式。當(dāng)需要根據(jù)條件應(yīng)用某些樣式時(shí)，這非常有用。示例如下：

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

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

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