Cara menggunakan v-if untuk menentukan sama ada untuk menunjukkan atau menyembunyikan elemen dalam Vue

Dalam rangka kerja Vue, v-if ialah arahan yang biasa digunakan, digunakan untuk menentukan sama ada untuk menunjukkan atau menyembunyikan elemen berdasarkan nilai ungkapan. Berikut akan memperkenalkan secara terperinci cara menggunakan arahan v-if.

1. Sintaks asas

Sintaks asas arahan v-if adalah seperti berikut:

<div v-if="expression">内容</div>

di mana ungkapan ialah ungkapan JavaScript benar, kemudian Paparkan elemen semasa; jika salah, keluarkan elemen semasa daripada DOM.

2. Contoh

Berikut ialah contoh mudah menggunakan arahan v-if:

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
</div>

Kami mendapati bahawa atribut isShow digunakan untuk mengawal data Sama ada untuk memaparkan kandungan perenggan, nilai ini ialah nilai Boolean. Apabila isShow adalah benar, kandungan perenggan akan dipaparkan, jika tidak, ia tidak akan dipaparkan. Oleh itu, dalam Vue, kita hanya perlu mengubah suai nilai isShow untuk menukar paparan kandungan.

3. Menggunakan v-if dan v-else

Selain v-if, Vue juga menyediakan arahan v-else, yang digunakan apabila v-if ungkapan ialah Paparkan elemen apabila palsu. Menggunakan v-else memerlukan meletakkannya pada elemen DOM yang sama seperti v-if, seperti yang ditunjukkan di bawah:

<div id="app">
  <p v-if="isShow">这是要显示的内容</p>
  <p v-else>这是要隐藏的内容</p>
</div>

Dalam contoh ini, jika isShow adalah benar, hanya kandungan perenggan pertama akan dipaparkan jika If isShow adalah palsu, hanya perenggan kedua akan dipaparkan.

4. Gunakan v-if dan v-else-if

Vue juga menyediakan arahan v-else-if, yang digunakan antara v-if dan v-else Masukkan syarat di antaranya. v-else-if juga perlu diletakkan pada elemen DOM yang sama seperti v-if, seperti yang ditunjukkan di bawah:

<div id="app">
  <p v-if="score >= 90">A级</p>
  <p v-else-if="score >= 80">B级</p>
  <p v-else-if="score >= 70">C级</p>
  <p v-else-if="score >= 60">D级</p>
  <p v-else>不及格</p>
</div>

Dalam contoh ini, kandungan perenggan yang berbeza akan dipaparkan mengikut gred yang berbeza.

5. Ringkasan

Artikel ini memperkenalkan penggunaan arahan v-if dalam Vue untuk menentukan sama ada untuk memaparkan atau menyembunyikan elemen berdasarkan nilai ungkapan. Kita boleh menggunakan v-if, v-else atau v-else-jika perlu untuk menentukan elemen yang hendak dipaparkan, dengan itu mencapai kesan interaksi halaman yang lebih kaya.

Atas ialah kandungan terperinci Cara menggunakan v-if untuk menentukan sama ada untuk menunjukkan atau menyembunyikan elemen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!