vue.js

でのCSSクラスの條件付きアプリケーションの方法の詳細(xì)な説明

コアポイント：

Vue.jsでは、cssクラスの條件付きアプリケーションを
• 屬性に結(jié)合することにより実裝できます。オブジェクトの屬性はCSSクラス名に対応し、その値はクラスを適用するかどうかを決定するJavaScript式です。 class
vue.jsは、2つの構(gòu)文を提供して、クラスバインディングを作成します。オブジェクト構(gòu)文と配列構(gòu)文。オブジェクトの構(gòu)文はより簡潔になりますが、配列構(gòu)文はテンプレートコードをより明確にする場合があります。選択する文法は、個人的な好みに依存します。
Vue.jsは、3次演算子、オブジェクト構(gòu)文を使用して複數(shù)のクラスをバインドする、計算されたプロパティを使用し、靜的クラスとバインディングクラスを組み合わせたもの、條件付きバインディングインラインスタイルなど、條件クラスの複數(shù)の結(jié)合方法をサポートしています。

実行時に変更する必要があるCSSクラスがあります。しかし、クラスを変更するときは、スタイルの詳細(xì)を條件付きで適用することが最適です。たとえば、ビューにポケットベルがあるとします。多くの場合、より大きなプロジェクトセットをナビゲートするために使用されます。ナビゲートするときは、ユーザーが現(xiàn)在のページに情報を表示するのに役立ちます。プロジェクトスタイルは、現(xiàn)在表示されているページに従って條件付きで設(shè)定されています。この場合、ポケットベルは次のようになるかもしれません：

この例には5ページがあり、一度に1ページのみを選択できます。このポケットベルをBootstrapで構(gòu)築すると、選択したページには

という名前のCSSクラスが適用されます。このクラスは、ページが現(xiàn)在表示されている場合にのみ必要です。つまり、CSSクラスを條件付きで適用する必要があります。幸いなことに、Vueは実行時にCSSクラスを要素に條件付きで適用する方法を提供します。これについては、この記事で説明します。

active実行時にCSSクラスを條件付きに適用するには、JavaScriptオブジェクトにバインドできます。このタスクを正常に完了するには、2つのステップを完了する必要があります。まず、CSSクラスが定義されていることを確認(rèn)する必要があります。次に、テンプレートにクラスバインディングを作成します。これらの手順については、この記事の殘りの部分で詳しく説明します。 active

ステップ1：CSSクラスを定義します

上記の畫像に表示されている5ページのアイテムが次のHTML定義を使用していると仮定します。

このコードスニペットの各ページには、リスト項目要素があることに注意してください（3番目のリストアイテム要素にはクラスがあります）。ご想像のとおり、これは條件付きで適用したいCSSクラスです。これを行うには、JavaScriptオブジェクトを追加する必要があります。

ステップ2：クラスバインディングを作成

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

activeテンプレートでクラスバインディングを作成する場合、2つの主なオプションがあります。オブジェクトの構(gòu)文を使用するか、配列構(gòu)文を使用します。この記事の殘りの部分で両方の方法を使用する方法を紹介します。

オブジェクトの構(gòu)文を使用した

バインディング オブジェクト構(gòu)文を使用してクラスバインディングを作成するには、JavaScript式を使用する必要があります。使用する表現(xiàn)は、この記事に関連するコードで見ることができます。関連するコードは次のとおりです

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

Vueの組み込み

ディレクティブを使用して、コードの量を削減します。この指令は、プロジェクトをループでレンダリングするために使用されます。この例のアイテムはページ自體です。 v-forコマンドを使用することに加えて、v-forコマンドの使用にも注意を払う必要があります。 v-bindディレクティブは、要素のv-bind屬性をVUEインスタンスに接続します。 VUEインスタンスは次のように定義されています class

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

という名前のプロパティが含まれています。上記で定義されているHTMLテンプレートを再訪すると、このプロパティが參照されていることに気付くでしょう。実際、各クラスのバインディングに関連付けられたJavaScriptオブジェクトは次のようになります。

このオブジェクトは、2つのプロパティを定義します。これらは、ステップ1で説明されている2つのCSSクラス名であることは注目に値します。ステップ2では、これら2つのクラス參照がJavaScriptオブジェクトのプロパティ名になりました。これらのプロパティ名に関連する値は、JavaScript式です。式が真の値に評価される場合、CSSクラスが含まれます。式がfalseに評価された場合、dataはCSSクラスを含めません。これらのルールを念頭に置いて、各屬性を見てみましょう。最初のプロパティの値currentPageは

です。このハードコードされた値は、クラスが常に必要なため、使用されます。 2番目のプロパティ

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

は、JavaScript式を使用します。この式が當(dāng)てはまる場合、

クラスが適用されます。これにより、page-itemの値に応じてactiveクラスを條件付きで適用できます。 クラスを條件付きに適用する別の方法は、配列にバインドすることです。 アレイの構(gòu)文を使用したpage-itemバインディングtrue page-itemVueでは、Arrayにバインディングすることにより、CSSクラスのリストを適用できます。配列構(gòu)文を使用する場合、ステップ1に表示されるHTMLは次のようになります。 active アレイ構(gòu)文を使用したactive実行バージョン。唯一の違いは、アレイがクラスバインディングで使用されることです。この代替案には、Vueのオブジェクトに他の2つのプロパティが存在する必要があります。これらの2つのプロパティは次のとおりです。これらのプロパティを含む更新されたVUE初期化コードは次のとおりです。 currentPage activeご覧のとおり、オブジェクトのサイズは増加しますが、アレイ構(gòu)文を使用すると、テンプレート內(nèi)のコードが少し簡潔になります。オブジェクト構(gòu)文はよりコンパクトです。オブジェクトの構(gòu)文と配列構(gòu)文の選択は、個人の好みに依存します。これらの方法はどちらも、HTMLテンプレートをより複雑にするようです。しかし、実際にはここにはもっとあります。実際、私たちは焦點を分離しています。データ駆動型のテンプレートを作成しています。これにより、アプリケーションが成長するにつれて、ビューがテストを容易にし、維持しやすくなります。 active

概要

この記事があなたに役立つことを願っています。 Vue.jsの詳細(xì)については、SitePointで他のVueコンテンツを確認(rèn)できます。

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

data（以下は元のテキストのFAQパーツの擬似オリジナルの作成であり、元の意味を維持しますが、表現(xiàn)を書き直しました） Vue.js條件pageItemClass activeClassでのCSSクラスの適用に関する

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

FAQ

條件付きクラスのバインディングに3成分演算子を使用する方法は？

vue.jsでは、條件付きクラスの結(jié)合には三元演算子を使用できます。これは、條件に基づいて2つのクラスを切り替えるためのシンプルで効率的な方法です。例は次のとおりです

<div :class="condition ? 'classA' : 'classB'"></div> この例では、條件が真である場合、條件が誤っている場合、

が適用されます。この條件は、有効なJavaScript式である可能性があります。

classAclassBvue.jsで複數(shù)のクラスを條件付けてバインドするにはどうすればよいですか？

vue.jsは、オブジェクト構(gòu)文を使用して複數(shù)のクラスの條件付きバインディングを許可します。これは、異なる條件に応じて複數(shù)のクラスを適用する必要がある場合に非常に便利です。例は次のとおりです

この例では、

がtrueである場合、

が適用されます。 <div :class="{ 'classA': conditionA, 'classB': conditionB }"></div>と

の両方が有効なJavaScript式になります。

conditionAclassAvue.jsでの條件付きクラスバインディングに計算された屬性を使用できますか？ conditionBclassB conditionAはい、條件付きクラスバインディングはvue.jsで使用できます。コンピューティングプロパティは、クラスのロジックが複雑であることを決定するときに役立ちます。例は次のとおりです conditionB

vueインスタンスでは、を計算されたプロパティとして定義してください：

この例では、

計算屬性は、そこに定義されている複雑なロジックに基づいてクラス名を返します。

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

vue.jsで靜的クラスとバインドクラスを組み合わせる方法は？

computedClass Vue.jsでは、靜的クラスとバインディングクラスを組み合わせることができます。これは、常に特定のクラスを適用する必要がある場合に非常に便利ですが、條件付きで他のクラスを適用する必要もあります。例は次のとおりです

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

この例では、は常に適用され、computedClassと

はそれぞれ

とに従って適用されます。

vue.jsでインラインスタイルを條件付けてバインドするにはどうすればよいですか？

<div :class="['staticClass', { 'classA': conditionA, 'classB': conditionB }]"></div>vue.jsは、オブジェクト構(gòu)文を使用してインラインスタイルの條件付き結(jié)合を許可します。これは、特定のスタイルを條件に応じて適用する必要がある場合に役立ちます。例は次のとおりです

staticClass この例では、classAである場合、classBが真である場合、色は赤く、conditionAが偽の場合、色は青です。同様に、conditionBが真の場合、フォントサイズは12pxの場合、フォントサイズは16pxです。

以上がvue.jsでCSSクラスを條件付きに適用する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。