v-if と v-for の違い: 1. 異なる関数。v-if 命令は、コンテンツの一部を条件付きでレンダリングするために使用されます。このコンテンツは、命令は true 値を返します レンダリング; v-for ディレクティブは、配列に基づいてリストをレンダリングします。 2. 優先順位が異なる v-for の方が v-if よりも優先され、if 判定の場合は v-if よりも先に v-for が判定されます。
は、コンテンツの一部を条件付きでレンダリングするために使用されます。このコンテンツは、ディレクティブの式が true 値を返した場合にのみ表示されます。
v-for ディレクティブは、配列に基づいてリストをレンダリングします。 v-for ディレクティブには、item in itemsという形式の特別な構文が必要です。ここで、items はソース データ配列またはオブジェクトであり、item は反復される配列要素のエイリアスです。
キー値を設定し、各キー値が一意であることを確認することをお勧めします。これにより、diff アルゴリズムの最適化が容易になります。
この 2 つの使用法の違いは次のとおりです:123
使用中、v-for は v-if よりも優先されます
v-if と v-for はどちらも vue テンプレート システムの命令です vue テンプレートの場合がコンパイルされると、コマンド システムが実行可能なレンダリング関数に変換されます
例p タグを記述し、v-if および v-for
{{ item.title }}
const app = new Vue({ el: "#app", data() { return { items: [ { title: "foo" }, { title: "baz" }] } }, computed: { isShow() { return this.items && this.items.length > 0 } } })
ƒ anonymous() { with (this) { return _c('div', { attrs: { "id": "app" } }, _l((items), function (item) { return (isShow) ? _c('p', [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) } }
最初の結論は v-for の方が v-if よりも優先度が高いということです
{{item.title}}
ƒ anonymous() { with(this){return _c('div',{attrs:{"id":"app"}}, [(isShow)?[_v("\n"), _l((items),function(item){return _c('p',[_v(_s(item.title))])})]:_e()],2)} }
ソースコードの場所:\vue-dev\src\compiler\codegen\index.js
export function genElement (el: ASTElement, state: CodegenState): string { if (el.parent) { el.pre = el.pre || el.parent.pre } if (el.staticRoot && !el.staticProcessed) { return genStatic(el, state) } else if (el.once && !el.onceProcessed) { return genOnce(el, state) } else if (el.for && !el.forProcessed) { return genFor(el, state) } else if (el.if && !el.ifProcessed) { return genIf(el, state) } else if (el.tag === 'template' && !el.slotTarget && !state.pre) { return genChildren(el, state) || 'void 0' } else if (el.tag === 'slot') { return genSlot(el, state) } else { // component or element ... }
これを回避する場合 この場合、テンプレートは外層にネストされており(ページレンダリングではdomノードは生成されません)、この層でv-if判定が行われ、内部でv-forループが行われます
条件がループ内に表示される場合は、計算された属性を通じて事前に表示する必要のない項目を除外できます。
computed: { items: function() { return this.list.filter(function (item) { return item.isShow }) } }
理由: v-for は v-if よりも優先されます。毎回配列全体を走査する必要があるため、不要な計算が発生し、パフォーマンスに影響します。
たとえば、v-for を使用してループします。ページ上に 100 個の li タグがありますが、index=97 の li タグのコンテンツのみが表示され、残りはすべて非表示になります。
100 個のリストで 1 つのデータのみを使用する必要がある場合でも、配列全体をループします。[関連する推奨事項:
vuejs ビデオ チュートリアル以上がVue の v-if と v-for の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。