Kemahiran lanjutan dalam pemaparan bersyarat Vue: kuasai v-if, v-show, v-else, v-else-if untuk melaksanakan pertimbangan logik yang kompleks

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan banyak ciri fleksibel, antaranya pemaparan bersyarat ialah salah satu fungsi yang biasa digunakan dalam pembangunan. Dalam Vue, kita boleh menggunakan arahan v-if, v-show, v-else, v-else-if dan lain-lain untuk melaksanakan pertimbangan logik yang kompleks dan rendering bersyarat. Artikel ini menerangkan cara menggunakan arahan ini dan menyediakan beberapa contoh kod khusus.

Arahan v-if ialah arahan pemaparan bersyarat yang paling biasa digunakan Anda boleh menambah atribut v-if pada elemen DOM untuk menentukan sama ada untuk memaparkan elemen berdasarkan syarat. Arahan v-if menambah atau mengalih keluar elemen DOM berdasarkan sama ada ungkapan itu benar atau palsu. Sebagai contoh, kami boleh memaparkan kandungan yang berbeza berdasarkan sama ada pengguna log masuk:

<template>
  <div>
    <div v-if="isLoggedin">
      欢迎回来，{{ username }}！
    </div>
    <div v-else>
      请登录后查看内容。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedin: false,
      username: 'John'
    }
  }
}
</script>

Dalam kod di atas, berdasarkan nilai isLoggedin, kami boleh memutuskan untuk memaparkan mesej alu-aluan atau gesaan log masuk. Apabila isLoggedin adalah benar, mesej alu-aluan dipaparkan, jika tidak gesaan log masuk dipaparkan.

Arahan v-show adalah serupa dengan arahan v-if Ia juga boleh mengawal paparan dan penyembunyian elemen berdasarkan syarat, tetapi ia tidak mengalih keluar struktur DOM hanya mengawal keterlihatan elemen paparan atribut elemen. Apabila menggunakan arahan v-show, elemen sentiasa wujud dalam DOM dan atribut paparan hanya ditetapkan berdasarkan syarat untuk menentukan sama ada untuk memaparkannya. Berikut ialah contoh:

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-show="isShow">
      这是一个隐藏的元素。
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    toggle() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

Dalam kod di atas, kami mengawal paparan dan menyembunyikan elemen dengan mengklik butang untuk menukar nilai isShow.

Selain v-if dan v-show, Vue juga menyediakan arahan v-else dan v-else-if untuk mengendalikan situasi rendering berbilang keadaan. v-else digunakan bersama-sama dengan v-if, yang bermaksud jika keadaan v-if sebelumnya tidak benar, kandungan v-else akan dilaksanakan. v-else-if digunakan untuk menukar antara berbilang syarat, dan penggunaannya adalah serupa dengan v-else. Berikut ialah contoh rendering berbilang syarat:

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

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

Dalam kod di atas, berdasarkan nilai skor, kita boleh menentukan tahap prestasi pelajar. Jika skor lebih besar daripada atau sama dengan 90, "Cemerlang" dipaparkan; jika skor lebih besar daripada atau sama dengan 60, "Lulus" dipaparkan;

Dengan menguasai arahan pemaparan bersyarat v-if, v-show, v-else, v-else-if, kami boleh bertindak balas secara fleksibel kepada pelbagai keperluan pertimbangan logik yang kompleks dalam pembangunan Vue. Contoh kod yang diberikan di atas boleh membantu anda memahami cara menggunakan arahan ini dengan lebih baik. Saya harap artikel ini akan membantu semua orang untuk mempelajari pemaparan bersyarat Vue.

Atas ialah kandungan terperinci Kemahiran lanjutan dalam pemaparan bersyarat Vue: kuasai v-if, v-show, v-else, v-else-if untuk melaksanakan pertimbangan logik yang kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!