ホームページ >ウェブフロントエンド >jsチュートリアル >vueのv-ifとv-showの違いを詳しく解説

vueのv-ifとv-showの違いを詳しく解説

小云云オリジナル: 2018-02-05 13:14:551495ブラウズ

この記事は、vue の学習メモの v-if と v-show の違いを中心に紹介していますが、編集者が非常に優れていると思ったので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

v-if vs v-show

v-if は、条件ブロック内のイベントリスナーとサブコンポーネントが切り替え中に適切に破棄され、再作成されることが保証されるため、「真」の条件付きレンダリングです。

v-if も遅延型です。最初のレンダリングで条件が false の場合、何も行われません。条件付きブロックは、条件が初めて true になるまでレンダリングされません。

それに比べて、v-show ははるかに単純です。初期条件が何であっても要素は常にレンダリングされ、CSS に基づいて切り替えるだけです。

一般に、v-if はスイッチングオーバーヘッドが高く、v-show は初期レンダリングオーバーヘッドが高くなります。したがって、頻繁に切り替える必要がある場合は v-show が適しており、実行時に条件が変化する可能性が低い場合は v-if が適しています。

<template>
  <p id="app">
    <p v-if="isIf">
      if
    </p>
    <p v-show="ifShow">
      show
    </p>
    <button @click="toggleShow">toggle</button>
  </p>
</template>

<script>
  export default {
    name: &#39;app&#39;,
    data() {
      return {
        isIf : true,
        ifShow : true,
        loginType : "username"
      }
    },
    methods: {
      toggleShow : function(){
        this.ifShow = this.ifShow ? false : true;
        this.isIf = this.isIf ? false : true;
      }
    }
  }
</script>

Chromeコンソールを見るとより明確に確認できます

比較すると、v-ifはコードから直接削除されており、v-showは表示を通じてステータスを切り替えるだけであることがわかります。頻繁に切り替える場合は、v-show を使用することをお勧めします。

vueのv-ifとv-showの違いを詳しく解説

関連記事