[Vue.js]Vue.js本記事では、Vue.jsのv-ifディレクティブについて紹介します。v-ifとv-else-ifとv-elseディレクティブv-ifディレクティブv-ifディレクティブはv-showディレクティブと同様にHTML要素の表示状態(表示・非表示)を切り替えるために使用します。v-ifディレクティブの書式v-ifディレクティブは以下の書式で使用します。/>「値または式」には、trueまたはfalseの真偽値で表されるboolean型となる値または式を指定します。値にはdataオプションに定義したプロパティや、computedオプションに定義したプロパティを指定します。式にはmethodsオプションに定義したプロパティを「プロパティ名()」の関数呼び出し形式で指定します。HTMLテンプレートに直接式を指定することもできます。1」という式になります。v-ifディレクティブの動作v-ifディレクティブは、HTML要素の表示・非表示をHTMLそのものの出力を制御することで切り替えています。none;”」が要素に付与されます。none;”」が要素から削除されます。id="app"><div></div></div>v-showディレクティブとの違いv-ifディレクティブは、HTML要素の表示・非表示の状態をHTMLを出力するかどうかで制御しています。HTML要素の表示・非表示をCSSのdisplayプロパティを変更することで実現しているv-showディレクティブとは、HTML要素の有無が違います。v-showディレクティブは、一度出力した要素のスタイル(CSS)を切り替えることで表示状態を切り替えていますので、描画不可が高くありませんが、v-ifディレクティブはHTML要素そのものを出力するかどうかで制御していますので、v-showディレクティブに比べて描画不可が高くなります。v-ifディレクティブとv-showディレクティブの使い分けv-ifディレクティブとv-showディレクティブの使い分けは、表示・非表示の切り替えの頻度が高いかどうか決めるのが一般的です。表示と非表示を頻繁に切り替える必要があればv-showディレクティブを使用します。逆に表示・非表示の切り替え頻度が低い要素であればv-ifディレクティブを使用します。v-ifディレクティブでしか実現できないことv-ifディレクティブに比べると、v-showディレクティブの方が描画不可が低いのであれば、v-ifディレクティブを使用する必要がないように思いますが、v-showディレクティブではできないことが、v-ifディレクティブでは実現できます。それが、ディレクティブに指定した要素の表示する条件の値または式が偽(false)の場合の動作を指定することができる点です。v-ifディレクティブでは、続くディレクティブとしてv-elseディレクティブと、v-else-ifディレクティブが使用できます。elseと同様の意味合いを持ちます。v-elseディレクティブとv-else-ifディレクティブv-elseディレクティブは、v-ifディレクティブで指定した表示有無条件を満たさない場合に表示するHTML要素に指定します。v-else><div>v-elseディレクティブは、v-ifディレクティブを指定した要素の後に1度だけ指定することができます。v-elseディレクティブでは、値や式を指定することはなく「v-else」のみを使用します。v-else-ifディレクティブは、v-ifディレクティブで指定した表示有無条件を満たさない場合に、さらに表示有無条件を指定するHTML要素を続ける場合に指定します。v-else><div>v-else-ifディレクティブは複数指定することができます。v-else><div>v-elseディレクティブとv-else-ifディレクティブは、v-ifディレクティブに対応するディレクティブなので、v-ifディレクティブを指定したHTML要素の直後のHTML要素でのみ使用することができます。v-ifディレクティブの使用例ここではv-ifディレクティブを使用して、HTML要素の表示状態(表示と非表示)を切り替える例を示します。v-ifディレクティブのみdataオプションに定義したプロパティを表示するかどうかを指定する条件に使用して、HTMLテンプレートのdiv要素にv-ifディレクティブを適用する例を示します。!isVisible">表示有無切り替え</button></div>上記の例では、dataオプションに定義したisVisibleプロパティの値がtrueの場合にv-ifディレクティブを指定したdiv要素が表示されます。v-ifとv-elseディレクティブv-ifディレクティブに続けてv-elseディレクティブを指定する例を以下に示します。!isVisible">表示有無切り替え</button></div>上記の例では、dataオプションに定義したisVisibleプロパティの値がtrueの場合にv-ifディレクティブを指定したdiv要素が表示され、falseの場合にv-elseディレクティブを指定したdiv要素が表示されます。v-ifとv-else-ifとv-elseディレクティブv-ifディレクティブ、v-else-ifディレクティブ、v-elseディレクティブを使用した例を以下に示します。/></div>上記の例ではdataオプションに定義したvalueプロパティの値によって、HTML要素の表示状態を切り替えています。テキストボックスに入力された数値が2以下であれば、v-ifディレクティブを指定したdiv要素が表示され、3~5であれば、次のv-else-ifディレクティブを指定したdiv要素が表示され、6~8であれば、さらに次のv-else-ifディレクティブを指定したdiv要素が表示され、9以上であれば、v-elseディレクティブを指定したdiv要素が表示されます。[Vue.js]Webアプリケーションでは、データをリスト(一覧)で表示することがよくあります。[Vue.js]ここでは、Vue.jsのv-htmlディレクティブについて紹介します。[Vue.js]今回は、コンポーネントに定義できるemitsオプションについて紹介します。[Vue.js]前回の記事では、.stop修飾子を使用してイベントの伝播を抑制する方法についてご紹介しました。$emit)[Vue.js]前回は子コンポーネントに実装したpropsと$emitを利用して、親コンポーネントのデータをやり取り(同期)する方法を紹介しました。