Apakah yang berlaku apabila v-if dan v-for digabungkan dalam vue?

Apabila arahan v-if dan v-for digunakan pada masa yang sama: 1. v-if diutamakan Jika salah, elemen tidak akan diberikan; diberikan secara berulang mengikut v-for. Contoh: v-if menyemak item.visible, v-for mengulangi item dan hanya memberikan item.name apabila item.visible adalah benar.

v-if dan v-for digunakan bersama dalam Vue

Apabila arahan v-if dan v-for digunakan bersama dalam Vue, perkara berikut akan berlaku:

Keutamaan

-jika arahan mempunyai keutamaan yang lebih tinggi. Ini bermakna jika elemen mempunyai kedua-dua arahan v-if dan v-for, arahan v-if akan dilaksanakan terlebih dahulu.

Operasi pemaparan

Jika arahan v-if palsu, elemen itu tidak akan dipaparkan. Jika arahan v-jika adalah benar, elemen akan diberikan berdasarkan arahan v-untuk.

Contoh

Contoh berikut menunjukkan cara menggunakan arahan v-if dan v-for:

<code class="html"><template>
  <ul>
    <li v-for="item in items" v-if="item.visible">
      {{ item.name }}
    </li>
  </ul>
</template></code>

Dalam contoh ini:

v-untuk arahan berulang pada tatasusunan item , untuk tatasusunan Setiap elemen dalam elemen <li> dipaparkan. <li>v-if arahan menyemak atribut item.visible. Elemen <li> hanya akan dipaparkan jika item.visible adalah benar.

items 数组，为数组中的每个元素渲染 <li> 元素。<li>v-if 指令检查 item.visible 属性。只有当 item.visible 为真时，<li> 元素才会被渲染。

因此，只有当 item.visible 为真时，才渲染显示 item.name 的 <li>Oleh itu, hanya apabila item.visible adalah benar, <li> daripada item.name akan dipaparkan . kod> elemen.

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