Vue menyembunyikan pernyataan penghakiman

Menyembunyikan pernyataan penghakiman dalam Vue ialah salah satu teknik yang sering digunakan dalam pembangunan, yang boleh menjadikan kod lebih ringkas dan jelas. Artikel ini akan memperkenalkan tiga pernyataan penghakiman tersembunyi yang biasa digunakan dalam Vue.

1. v-if

v-if ialah pernyataan penghakiman tersembunyi yang paling biasa digunakan dalam Vue. Ia menilai sama ada sesuatu elemen diberikan berdasarkan ungkapan benar atau salah. Apabila ungkapan itu benar, elemen itu diberikan, jika tidak, ia tidak diberikan.

Format sintaks v-if adalah seperti berikut:

<div v-if="flag">Hello,Vue!</div>

Antaranya, bendera ialah data jenis Boolean.

v-if juga mempunyai arahan terbitan v-else, yang digunakan untuk menghasilkan elemen apabila ungkapan v-if adalah palsu. v-else dan v-if mesti digunakan rapat bersama, dan formatnya adalah seperti berikut:

<div v-if="flag">条件为真</div>
<div v-else>条件为假</div>

Situasi lain ialah apabila ungkapan v-if adalah palsu, kita mungkin tidak mahu elemen itu sepenuhnya dialih keluar, Sebaliknya, jika anda ingin menyimpan elemen dalam DOM, anda boleh menggunakan arahan v-show.

2. v-show

v-show juga digunakan untuk mengawal paparan dan menyembunyikan elemen berdasarkan ungkapan benar atau salah, tetapi ia berbeza daripada v-if dalam hal itu tanpa mengira daripada ungkapan Tidak kira sama ada ungkapan itu benar atau salah, v-show tidak akan sekali-kali mengalih keluar elemen.

Format sintaks v-show adalah seperti berikut:

<div v-show="flag">Hello,Vue!</div>

3 v-for

Arahan v-for boleh menggelung melalui tatasusunan atau objek dan menambah setiap satu. elemen di dalamnya Render ke dalam templat. Apabila data yang dilalui ialah tatasusunan, format sintaks v-for adalah seperti berikut:

<ul>
  <li v-for="(item,index) in list">{{item}}</li>
</ul>

Antaranya, item mewakili setiap elemen yang dilalui, dan indeks mewakili kedudukan indeks unsur yang dilalui.

Apabila data yang dilalui ialah objek, format sintaks v-for adalah seperti berikut:

<ul>
  <li v-for="(value,key) in obj">{{key}} : {{value}}</li>
</ul>

Antaranya, nilai mewakili setiap nilai atribut dalam objek, dan kunci mewakili setiap nama atribut .

Adalah penting untuk ambil perhatian bahawa apabila menggunakan gelung v-untuk, sebaiknya tambahkan nilai kunci unik pada setiap item yang dilalui untuk meningkatkan prestasi pemaparan.

Ringkasan

Melalui pengenalan di atas, kita dapat melihat bahawa pernyataan penghakiman tersembunyi dalam Vue sangat praktikal dan boleh menjadikan kod kita lebih ringkas dan jelas. Antaranya, v-if, v-show dan v-for adalah tiga pernyataan pertimbangan tersembunyi yang paling biasa digunakan. Mahir dalam penggunaannya boleh meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Vue menyembunyikan pernyataan penghakiman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!