ディレクティブを使って、どんなことができるのか見てきました。ライトコードの宮田です。ディレクティブを利用すると、条件分岐によって、簡単に要素の有無の切り替えをすることができます。例として、会員の種類別にユーザーへ出すメッセージを分けたい場合を考えてみます。いうプロパティを用意しました。パターンは例外として、「不正なユーザーです。isPremier">あなたはプレミアム会員です。!isPremier">あなたは一般会員です。v-else-if="!isPremier">あなたは会員ではありません。v-else>不正なユーザーです。isPremier">あなたはプレミアム会員です。!isPremier">あなたは一般会員です。v-else-if="!isPremier">あなたは会員ではありません。v-else>不正なユーザーです。値を変えて、表示の変更を確認してみてください。要素の直後に記述する必要があります。v-showディレクティブv-showディレクティブを利用すると、値の真偽値によって、要素の表示の切り替えをすることができます。機能的には同じように思えますね。この2つのディレクティブには、非表示の仕組みに違いがあります。DOM上から削除されるために表示されない状態です。追加することによって表示と非表示を切り替えているだけなので、DOM上には常に存在している状態です。v-if="isVisible">見えていますか?</p>実行時のディベロッパーツールの表示は、こちらです。p要素のエレメントがDOM上から消えていることが確認できますね。v-show="isVisible">見えていますか?</p>実行時のディベロッパーツールの表示はこちらです。プロパティの値によって、非表示になっていることがわかります。エレメントは、常時描画されており、DOM上に保持されていますね。表示を頻繁に切り替える必要のあるエレメントを考えてみましょう。切り替えるたびにエレメントの追加・削除を行う処理が生じます。その結果、表示にかかるコストが高くなってしまうのです。属性の追加・削除だけで済むため、結果的に切り替えの際の表示コストが低いです。「v-else-if」や「v-else」とは対応していません。v-forv-forディレクティブを利用すると、配列に基づいた要素のリストレンダリングをすることができます。いう形式の構文で記述します。記述することで任意の2つ目の引数として利用することができます。配列だけでなく、オブジェクトに対しても使用できます。いう配列のプロパティの中身を展開して、リストとして表示してみたいと思います。いうキーを持ったオブジェクトが入ります。v-bind:key)も指定してありますね。データを追跡するために必要で、パフォーマンスの向上にもつながります。プロパティの指定が必須とされています。して使用すべきではないようです。理由は、配列内の要素の追加・削除や順序の変更が行われるとき、indexの値も変化してしまうためです。振り直されてしまいます。データの変更を追跡できなくなってしまうため、予期せぬ動作を引き起こす可能性があります。同じ要素に使用するのは非推奨とされています。方が高いため先に評価されます。追加することで解決します。filter関数を定義するという形で解決することができます。一例ですが、以下のような感じです。よるレンダリングを一度だけ行うようにすることができます。そのため、初回表示以降に値の変更があっても表示は変更されなくなります。内は以下のようなコードになりました。まま表示が変わらなくなっていますね。主要なディレクトリと使い方についてみてきました。Webエンジニアの宮田です。ライトコードの宮田です。社長と一杯飲みながらお話してみたい方はこちらミツオカフリーランスエンジニア様の募集はこちらにゃんこ師匠その他、お問い合わせはこちらミツオカお気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!一緒に働いてくれる仲間を募集しております!ライトコードでは、仲間を募集しております!当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。rightcodeエンジニア大募集中!私たちライトコードでは、エンジニアを募集しております。私服大歓迎のカジュアルな職場なので、お気軽にご応募ください!また、フリーエンジニアの方も募集しております。