More than 1 year has passed since last update.

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

Posted at 2021-10-12

はじめに

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

要素の表示/非表示を切り替えることができます。
v-ifと違うポイントとしてはp要素そのものが削除されるのではなくcssのdisplay プロパティをon/offされるで表示/非表示が繰り返されます。

HTML

<div>
  <p v-show="toggle">
     Good night!
  </p>
</div>

Vue.js

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

※細かい書き方はv-ifと同じで前記事で解説しているので省略します。

・v-showではdisplayプロパティがon/offされる。
・全体的な書き方はv-ifと一緒。

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

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

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