Cara menggunakan v-if dan v-else-if untuk mencapai pelbagai pemaparan bersyarat dalam Vue

Vue ialah rangka kerja JavaScript yang sangat popular Ia bukan sahaja boleh digunakan untuk membina aplikasi satu halaman (SPA), tetapi juga boleh digunakan untuk mencipta antara muka pengguna yang kompleks. Arahan v-if dan v-else-if dalam Vue ialah dua arahan penting untuk paparan bersyarat Artikel ini akan memperkenalkan cara menggunakan kedua-dua arahan ini untuk melaksanakan pelbagai pemaparan bersyarat.

1. Pengenalan kepada arahan v-if

Arahan v-if ialah salah satu arahan yang paling biasa digunakan dalam Vue Ia digunakan untuk membuat unsur bersyarat berdasarkan nilai an ungkapan. Jika ungkapan dinilai kepada benar, elemen itu diberikan, jika tidak elemen itu tidak diberikan.

Sebagai contoh, kod berikut menunjukkan penggunaan arahan v-if untuk menentukan sama ada nombor lebih besar daripada 10. Jika nombor lebih besar daripada 10, label "Nombor lebih besar daripada 10" dipaparkan, jika tidak, label tidak dipaparkan:

<template>
  <div>
    <p v-if="num > 10">数字大于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 20
    }
  }
}
</script>

Kaedah data() di sini mengembalikan objek yang mengandungi atribut num yang nilai awalnya ialah 20. Oleh itu, apabila rendering, hasil ungkapan "bilangan > 10" dinilai sebagai benar, jadi label akan dipaparkan dan teks dalam label ialah "Nombor lebih besar daripada 10".

2. Pengenalan kepada arahan v-else-if

Arahan v-else-if juga digunakan untuk elemen pemaparan bersyarat. Ia perlu digunakan sebagai "elemen adik beradik seterusnya" bagi arahan v-if untuk menentukan sama ada hendak membuat elemen berdasarkan nilai ungkapan. Jika ungkapan arahan v-if sebelumnya dinilai palsu, maka arahan v-else-if akan menyemak sama ada ungkapannya adalah benar dan menjadikan elemen jika ia benar.

Sebagai contoh, kod berikut menunjukkan cara menggunakan arahan v-if dan v-else-if untuk melaksanakan pelbagai pemaparan bersyarat:

<template>
  <div>
    <p v-if="num > 30">数字大于30</p>
    <p v-else-if="num > 20">数字大于20</p>
    <p v-else-if="num > 10">数字大于10</p>
    <p v-else>数字小于等于10</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 15
    }
  }
}
</script>

Nombor nombor ditakrifkan di sini, dengan permulaan nilai 15. Arahan berbilang v-if dan v-else-if digunakan untuk memutuskan sama ada untuk memaparkan label berdasarkan nilai num. Mula-mula, tentukan sama ada nombor lebih besar daripada 30. Jika ya, paparkan label "Nombor lebih daripada 30". Jika tidak, tentukan sama ada nombor lebih daripada 20. Jika ya, paparkan label "Nombor lebih daripada 20", dan seterusnya.

Dalam contoh ini, memandangkan nilai nombor ialah 15, dua syarat pertama tidak dipenuhi, tetapi syarat ketiga dipenuhi, jadi label "Nombor lebih besar daripada 10" diberikan.

3. Pelaksanaan pelbagai pemaparan bersyarat

Apabila berbilang syarat perlu dinilai, kita boleh menggunakan arahan v-if dan v-else-if dalam kombinasi untuk melaksanakan pelbagai pemaparan bersyarat. Kod berikut menunjukkan cara menggunakan arahan v-if dan v-else-if untuk memaparkan elemen berbeza berdasarkan keadaan berbeza:

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 75
    }
  }
}
</script>

Dalam contoh ini, teks berbeza dipaparkan berdasarkan skor . Apabila skor lebih besar daripada atau sama dengan 90 mata, "Cemerlang" dipaparkan; apabila skor lebih besar daripada atau sama dengan 80 mata, "Baik" dipaparkan apabila skor lebih besar daripada atau sama dengan 60 mata, "Lulus " dipaparkan; jika tidak, "Gagal" dipaparkan.

4. Ringkasan

Arahan v-if dan v-else-if ialah dua arahan yang sangat penting dalam Vue, yang boleh digunakan untuk menghasilkan elemen secara bersyarat. Apabila digunakan bersama, anda boleh memaparkan elemen yang berbeza berdasarkan keadaan yang berbeza seperti dalam kod contoh. Pendekatan ini membolehkan kami mengatur program dengan cara yang lebih jelas dan memudahkan penyelenggaraan.

Atas ialah kandungan terperinci Cara menggunakan v-if dan v-else-if untuk mencapai pelbagai pemaparan bersyarat dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!