この記事は、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: 'app', 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.js での v-show と v-if の使用に関する注意事項
一般的な Vue.js 命令の概要(v-if、v-forなど)
以上がvueのv-ifとv-showの違いを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。