cari
Rumahhujung hadapan webSoal Jawab bahagian hadapanApakah perbezaan antara v-if dan v-for dalam vue

Perbezaan antara v-if dan v-for: 1. Fungsi yang berbeza Arahan v-if digunakan untuk memberikan sekeping kandungan secara bersyarat ini hanya akan dipaparkan apabila ungkapan arahan mengembalikan nilai sebenar Rendering; arahan v-for menghasilkan senarai berdasarkan tatasusunan. 2. Keutamaan adalah berbeza v-untuk mempunyai keutamaan yang lebih tinggi daripada v-jika Apabila menilai jika, v-untuk dinilai sebelum v-jika.

Apakah perbezaan antara v-if dan v-for dalam vue

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Pertama sekali, jelas dinyatakan dalam dokumentasi rasmi bahawa v-for dan v-if tidak disyorkan untuk digunakan bersama.

1. Peranan v-if dan v-for

v-if command digunakan untuk memberikan sekeping kandungan secara bersyarat. Kandungan ini hanya akan dipaparkan jika ungkapan arahan mengembalikan nilai sebenar . Arahan

v-for memaparkan senarai berdasarkan tatasusunan . Arahan v-for memerlukan sintaks khas dalam bentuk item in items, dengan item ialah tatasusunan data sumber atau objek, dan item ialah alias bagi elemen tatasusunan yang diulang.

Dalam v-for, adalah disyorkan untuk menetapkan nilai kunci dan memastikan setiap nilai kunci adalah unik, yang memudahkan pengoptimuman algoritma perbezaan .

Perbezaan penggunaan antara keduanya adalah seperti berikut:

<div v-if="isShow" >123</div>
  
<li v-for="item in items" :key="item.id">
  {{ item.label }}
</li>

2 >Sedang digunakan, v-for mempunyai keutamaan yang lebih tinggi daripada v-if

v-if dan v-for adalah kedua-dua arahan dalam sistem templat vue

Disusun dalam templat vue Apabila,

akan menukar sistem arahan menjadi fungsi render boleh laku

Contoh Tulis teg p dan gunakan v-if dan v-for pada masa yang sama


Buat contoh vue dan simpan isShow dan data item

<div id="app">
  <p v-if="isShow" v-for="item in items">
    {{ item.title }}
  </p>
</div>

Kod arahan templat akan dijana dalam fungsi pemaparan dan fungsi pemaparan boleh diperolehi melalui aplikasi.$ options.render

const app = new Vue({
 el: "#app",
 data() {
  return {
   items: [
    { title: "foo" },
    { title: "baz" }]
  }
 },
 computed: {
  isShow() {
   return this.items && this.items.length > 0
  }
 }
})

_l ialah fungsi pemaparan senarai bagi vue, dan pertimbangan if akan dilakukan di dalam fungsi

Kami pada mulanya membuat kesimpulan: v-for mempunyai keutamaan yang lebih tinggi daripada v -if
ƒ anonymous() {
 with (this) { return
  _c(&#39;div&#39;, { attrs: { "id": "app" } }, 
  _l((items), function (item) { return (isShow) ? _c(&#39;p&#39;, [_v("\n" + _s(item.title) + "\n")]) : _e() }), 0) }
}

Kemudian v-for dan v- if diletakkan pada label yang berbeza

dan kemudian fungsi render ialah output

<div id="app">
  <template v-if="isShow">
    <p v-for="item in items">{{item.title}}</p>
  </template>
</div>

Pada masa ini kita dapat melihat bahawa apabila v-for dan v-if bertindak pada label yang berbeza, mereka mula-mula Membuat pertimbangan dan kemudian memberikan senarai

ƒ anonymous() {
 with(this){return
  _c(&#39;div&#39;,{attrs:{"id":"app"}},
  [(isShow)?[_v("\n"),
  _l((items),function(item){return _c(&#39;p&#39;,[_v(_s(item.title))])})]:_e()],2)}
}
Mari kita semak semula kod sumber vue

Lokasi kod sumber: vue- devsrccompilercodegenindex.js


Apabila membuat penghakiman if, v- for diadili sebelum v-if

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 === &#39;template&#39; && !el.slotTarget && !state.pre) {
  return genChildren(el, state) || &#39;void 0&#39;
 } else if (el.tag === &#39;slot&#39;) {
  return genSlot(el, state)
 } else {
  // component or element
  ...
}
Hasil penghakiman akhir ialah v-for mempunyai keutamaan yang lebih tinggi daripada v-if

3. Langkah berjaga-jaga Jangan sekali-kali menggunakan v-if dan v-for pada elemen yang sama pada masa yang sama, yang akan menyebabkan pembaziran prestasi (setiap pemaparan akan gelung dahulu dan kemudian melakukan pertimbangan bersyarat)

Untuk mengelakkan situasi ini, sarang templat di lapisan luar (perenderan halaman tidak menjana nod dom), lakukan penilaian v-jika pada lapisan ini , dan kemudian lakukan gelung v-untuk secara dalaman

Jika keadaan muncul di dalam gelung, anda boleh menapis item yang tidak perlu dipaparkan terlebih dahulu melalui atribut yang dikira

<template v-if="isShow">
  <p v-for="item in items">
</template>

Perihalan kes:
computed: {
  items: function() {
   return this.list.filter(function (item) {
    return item.isShow
   })
  }
}

Sebab: v- untuk mempunyai keutamaan yang lebih tinggi daripada v-jika Ia perlu merentasi keseluruhan tatasusunan setiap kali, menyebabkan pengiraan yang tidak perlu dan menjejaskan prestasi

Contohnya, gunakan v-for untuk menggelungkan 100 li tag dalam halaman, tetapi hanya memaparkan Kandungan tag li dengan index=97 disembunyikan.

Walaupun hanya satu data yang perlu digunakan dalam 100 senarai, ia akan melingkari keseluruhan tatasusunan.


Penyelesaian: Gunakan pengiraan

 
        
  • {{item.name}}
  •  

[Cadangan berkaitan:

tutorial video vuejs
<ul>
    <li v-for="item in activeList">{{item.name}}</li>
</ul>

computed: {
  activeList() {
    return this.list.filter(val => {
      return val.actived;
    });
  }
},
,

pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah perbezaan antara v-if dan v-for dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Faedah komuniti dan ekosistem yang kuatFaedah komuniti dan ekosistem yang kuatApr 29, 2025 am 12:46 AM

Bertindak balas

React Native for Mobile Development: Membina aplikasi silang platformReact Native for Mobile Development: Membina aplikasi silang platformApr 29, 2025 am 12:43 AM

ReactnativeischosenformobiledevelopmentbecauseitallowsdeveloperstowritecodeonceanddeployitonmultiplePlatforms, reducingdevelopmentTimeandcosts.itoffersnear-nativeperformance, andleverageSexistingWebdevelskills

Mengemas kini keadaan dengan betul dengan useState () dalam ReactMengemas kini keadaan dengan betul dengan useState () dalam ReactApr 29, 2025 am 12:42 AM

Kemas kini yang betul dari UseState () Negeri dalam React memerlukan pemahaman butir -butir pengurusan negeri. 1) Gunakan kemas kini berfungsi untuk mengendalikan kemas kini tak segerak. 2) Buat objek atau array negeri baru untuk mengelakkan secara langsung mengubah keadaan. 3) Gunakan objek negara tunggal untuk menguruskan borang kompleks. 4) Gunakan teknologi anti-goncang untuk mengoptimumkan prestasi. Kaedah ini boleh membantu pemaju mengelakkan masalah biasa dan menulis aplikasi reaksi yang lebih mantap.

Senibina berasaskan komponen React: Kunci untuk pembangunan UI berskalaSenibina berasaskan komponen React: Kunci untuk pembangunan UI berskalaApr 29, 2025 am 12:33 AM

Seni bina komponen React menjadikan pembangunan UI berskala yang cekap melalui modulariti, kebolehgunaan semula dan kebolehpercayaan. 1) modulariti membolehkan UI dipecah menjadi komponen yang boleh dibangunkan dan diuji secara bebas; 2) kebolehgunaan semula komponen menjimatkan masa dan mengekalkan konsistensi dalam projek yang berbeza; 3) Pengekalkan membuat kedudukan masalah dan mengemas kini lebih mudah, tetapi komponen perlu dielakkan terlalu banyak dan bersarang.

Pengaturcaraan Deklaratif dengan React: Memudahkan logik UIPengaturcaraan Deklaratif dengan React: Memudahkan logik UIApr 29, 2025 am 12:06 AM

Dalam React, pengaturcaraan deklaratif memudahkan logik UI dengan menerangkan keadaan UI yang dikehendaki. 1) Dengan menentukan status UI, React secara automatik akan mengendalikan kemas kini DOM. 2) Kaedah ini menjadikan kod lebih jelas dan lebih mudah untuk dikekalkan. 3) Tetapi perhatian harus dibayar kepada kerumitan pengurusan negeri dan pengoptimuman semula.

Saiz Ekosistem React: Menavigasi Landskap KompleksSaiz Ekosistem React: Menavigasi Landskap KompleksApr 28, 2025 am 12:21 AM

TonavigateReact'scomplexplexecystemefectively, fahamiThetoolsandlibraries, accentizeTheirstrengthsandWeaknesses, andintegratethemtoenhancedevelopment.startwithcorereactconceptsandusestate, thengradlyintroduceMoreSlikePompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompiker

Bagaimana React menggunakan kekunci untuk mengenal pasti item senarai dengan cekapBagaimana React menggunakan kekunci untuk mengenal pasti item senarai dengan cekapApr 28, 2025 am 12:20 AM

ReactusesKeystoefficientyDidentyListItemsByprovidingStableIdentityToeachelement.1) KeysallowreacttotrackChangesInlistSwithoutre-renderingheentireList.2) PilihUniqueAndStableKeys, mengelakkanAringArrayIndices.3) correcteyusageSageSageSageSageSageSymifiFicelyimproves

Debugging Isu yang berkaitan dengan kunci dalam React: Mengenal pasti dan menyelesaikan masalahDebugging Isu yang berkaitan dengan kunci dalam React: Mengenal pasti dan menyelesaikan masalahApr 28, 2025 am 12:17 AM

KeysinreactarecrucialForOptimizingTheringProcessandManagingDynamicListSeffectively.tospotandfixkey-Relatedissues: 1) adduniquekeystolistitemstoavoidwarningsandperformanceissues, 2) UseUniquIdierFiersfromdatainsteadofindicessfeadofindicesshipsfeadofindicesshipsfeadofindicesshipsfeadofindicessfeadofindicesshipsfeadofindicesshipsfeadofindicesshipsfeadofindicessfeadofindicessfeadofindices,

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular