【Vue.js】条件付きレンタリング v-ifとv-else

はじめに

こんにちは！
今回は【Vue.js】v-ifとv-elseについてアウトプットしていきます！

v-ifとv-elseとは

真偽値により要素の表示/非表示を切り替えることができる。

書き方・解説

HTML

<div id="app">
  <p v-if="toggle">
    YES
  </p>
  <p v-else>
    NO
  </p>
</div>

Vue.js

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

toggleがtrueなのでYESと表示されています。
toggleがfalseなのであればNOと表示されます。

まとめ

このように真偽値を使って表示させるものを切り替えることができます。

最後に

今回はv-ifとv-elseについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

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

最後までご愛読ありがとうございました！