Vue.jsのディレクティブ：v-if, v-for, v-showの基本

Vue.jsとは？

Vue.js（ビュー・ジェイエス）は、ユーザーインターフェースを構築するためのフレームワークです。JavaScriptを基盤にしていて、シンプルで直感的に使えるのが特徴です。これから紹介するディレクティブは、Vue.jsを使う上で非常に重要な機能です。

ディレクティブとは？

ディレクティブとは、Vue.jsの特別な属性で、HTML要素に特定の機能を持たせることができるものです。これにより、簡単に動的な表示やリストの描画が可能になります。ここでは、特によく使われる3つのディレクティブ「v-if」、「v-for」、「v-show」について詳しく説明します。

v-if：条件による表示の切り替え

v-ifディレクティブは、条件に応じてHTML要素を表示したり非表示にしたりするために使います。このディレクティブを使うことで、特定の条件が満たされたときだけ要素を表示できます。

使い方の例

例えば、次のようなコードで使用します。

 

  
こんにちは、Vue.js!
  表示/非表示

v-for：リストの描画

v-forディレクティブは、配列やオブジェクトをループして、リストを簡単に描画するために使用します。これを使うと、データが増えても自動的に表示を更新します。

使い方の例

以下の例では、配列のデータをリストとして表示します。

 

  

    
{{ item.name }}
  

v-show：表示・非表示の切り替え

v-showディレクティブは、要素の表示・非表示を切り替えることができますが、v-ifとは少し異なります。v-showでは、要素はDOMに残りますが、CSSで非表示にされます。

使い方の例

次のコードで、v-showを利用します。

 

  
こんにちは、Vue.js!
  表示/非表示

まとめ

今回は、Vue.jsのディレクティブ「v-if」、「v-for」、「v-show」について基本的な使い方を紹介しました。これらのディレクティブを使うことで、動的なコンテンツを簡単に作成することができます。