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

この記事は、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 を使用することをお勧めします。

関連する推奨事項:

要素とテンプレートでの v-if 命令の使用の詳細な説明

Vue.js での v-show と v-if の使用に関する注意事項

一般的な Vue.js 命令の概要(v-if、v-forなど)

以上がvueのv-ifとv-showの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。