動的な表示の概要

  • 1 分

データに基づくページを作成する際に、特定の値に基づいて表示を変更することが必要になる場合があります。 あるいは、配列内の複数の項目を表示することが必要になる場合があります。

Vue.js を使用すると、ディレクティブを使用してこれらの操作を行うことができます。 また、そうすることで、HTML を使用して出力を制御できるようになります。これは、多くの Web 開発者にとって自然なことです。

このモジュールでは、配列内の項目を表示する方法と、条件付き表示ロジックを実装する方法について調べます。

目標

このモジュールを終了すると、次の方法を理解できます。

  • 配列内のすべての項目をレンダリングする。
  • 変数の値に基づいて HTML 要素を表示または非表示にする。
  • Vue.js では、if、else、else-if ステートメントを使用します。

前提条件