【Vue.js】v-ifディレクティブで条件判定する

こんにちは、のっくんです。

今日はVue.jsのv-ifディレクティブを使って条件判定するコードを紹介していきたいと思います。

Vue.jsの基本となるコンポーネントを使いながらテンプレートにv-ifディレクティブを使って条件判定させてみましょう。

vue.jsでコンポーネントを使うには3つの構成要素が必要になります。

  • コンポーネントの利用
  • コンポーネントのテンプレート
  • コンポーネントのオブジェクト

順番に見ていきます。

スポンサーリンク

コンポーネントの利用

fugaコンポーネントというのを作ってみます。

コンポーネントのプロパティには、「name」,「msg」,「f」の3つの引数を指定するようにしました。

fがフラグの役割を果たします。

このfがTrueかFalseかで表示するテンプレートを切り替えるように設計していきます。

コンポーネントのオブジェクト

fugaコンポーネントを作っていきます。

テンプレート(template)、プロパティ(props)、データ(data)を指定します。

プロパティには、先ほどのコンポーネントの利用で指定した3つの引数を設定します。

fはそのまま渡すのではなく、変数の中身を小文字にしてflgという名前の変数としてテンプレートに渡すように、data内で変換します。

プロパティの値を指定して小文字にするには、this.f.toLowerCase()のようにします。

dataとして渡すときには、functionの戻り値として書くことを忘れないようにしましょう。

コンポーネントのテンプレート

フラグがTrueかそれ以外かで表示する生成するテンプレートを切り替えるようにします。

v-if構文を使って、フラグの中身によって条件判定します。

divタグのクラス名にalertを追加することで、背景色がついて分かりやすくなります。

 

・フラグがTrueの場合

・フラグがFlaseの場合