More than 3 years have passed since last update.

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

Posted at 2021-11-01

#はじめに
こんにちは！
今回は【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にてアウトプットしていきます！

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