【Vue.js】条件分岐 v-if について

はじめに

こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回は条件分岐 v-if についてアウトプットしていきます！

V-ifとは

条件分岐v-ifを利用することによって要素に表示/非表示を切り替えることができます。

書き方

基本的な書き方は以下のようになります。

HTML

    <div id ="app">
       <p v-if="toggle">
          Good morning!
       </p>
    </div>

Vue.js

var app = new Vue({
    el:'#app',
    data:{
      toggle: true,
    }

プロパティtoggle（任意）を定義し、真偽値trueorfalseを書きます。
（trueなら表示、falseなら非表示になります。）
次にp要素にvーifディレクティブを設定し、値にはプロパティtoggleを指定します。
上記にはtoggle:trueに指定してありますので、Good morning!が表示されています。

※v-ifでは表示/非表示がdisplay:noneではなく、p要素そのものが削除される仕組みになっており、描画コストが高くなる恐れがあります。頻繁に表示/非表示を繰り返すのならばv-showディレクティブを使用することを推奨します。（別記事で解説します）

まとめ

・要素にv-if="プロパティ"を指定。
・data:{プロパティ:真偽値}を設置。

プロパティは任意になります！

最後に

今回はv-ifについてアウトプットしました。
もし認識の仕方が間違っていましたら、コメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！