Vue.js v-showのサンプルコード

Vue.js v-showのサンプルコード

v-showの簡単なサンプルコード 。v-ifとの違いについても少し説明してます

環境

  • OS  Windos10
  • エディタ VScode

サンプルコード

下記のソースコードをindex.htmlとして作成する

vue.jsは開発バージョンを利用してます
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

保存したファイルをブラウザで開いて確認 。「Clickで表示」をクリックすると「表示されました」の文言が表示されます

v-ifとの違いについて

v-ifは下図のようにコメントアウトされる

v-showはdisplay: none;が付与される

基本的に、よく画面を切り替える場合は、描画コストがかかるv-ifよりもv-showの方が推奨されていますが、初期ロード時はv-showの方が時間がかかるようです