Kemahiran pemaparan bersyarat Vue didedahkan: belajar menggunakan v-if, v-show, v-else, v-else-if untuk mencapai kawalan fleksibel

Kemahiran rendering bersyarat Vue didedahkan: Belajar menggunakan v-if, v-show, v-else, v-else-jika untuk mencapai kawalan fleksibel, anda memerlukan contoh kod khusus

Dalam Vue, rendering bersyarat adalah sangat tugas penting Teknik yang penting, ia boleh mengawal paparan dan penyembunyian komponen atau elemen berdasarkan syarat tertentu. Vue menyediakan pelbagai arahan pemaparan bersyarat, termasuk v-if, v-show, v-else, v-else-if, dsb. Artikel ini akan menyelidiki teknik penggunaan arahan ini dan memberikan contoh kod khusus.

1. v-if arahan
   Arahan v-if boleh menentukan sama ada untuk menghasilkan komponen atau elemen tertentu berdasarkan nilai ungkapan. Jika nilai ungkapan adalah benar, kandungan yang sepadan akan dipaparkan jika nilai ungkapan itu palsu, kandungan yang sepadan tidak akan dipaparkan. Berikut ialah contoh:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

Dalam contoh ini, kami menggunakan arahan v-if untuk menentukan sama ada untuk memaparkan tajuk berdasarkan nilai showHeading. Jika nilai showHeading adalah benar, maka tajuk akan diberikan; jika nilai showHeading adalah palsu, maka perenggan dengan tajuk tersembunyi akan dipaparkan.

2. v-show command
   Arahan v-show mempunyai fungsi yang serupa dengan arahan v-if Ia juga boleh mengawal paparan dan penyembunyian komponen atau elemen berdasarkan nilai ungkapan. Tidak seperti v-if, v-show tidak menambah atau mengalih keluar elemen DOM berdasarkan syarat, tetapi mengawal paparan dan penyembunyian elemen melalui gaya CSS. Berikut ialah contoh:

<template>
  <div>
    <h1 v-show="showHeading">显示标题</h1>
    <p v-show="!showHeading">隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

Dalam contoh ini, kami menggunakan arahan v-show untuk mengawal paparan dan penyembunyian tajuk berdasarkan nilai showHeading. Berbanding dengan v-if, logik v-show adalah lebih mudah kerana ia hanya mengawal paparan dan penyembunyian elemen melalui gaya CSS.

3. Arahan v-else
   Arahan v-else mesti digunakan bersama-sama dengan arahan v-if atau v-show untuk menyatakan keadaan yang bertentangan dengan arahan v-if atau v-show. Berikut ialah contoh:

<template>
  <div>
    <h1 v-if="showHeading">显示标题</h1>
    <p v-else>隐藏标题</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHeading: true
    };
  }
};
</script>

Dalam contoh ini, jika nilai showHeading adalah benar, maka elemen dengan tajuk yang dipaparkan akan dipaparkan; jika nilai showHeading adalah palsu, maka perenggan dengan tajuk tersembunyi akan dipaparkan .

4. v-else-if arahan
   Arahan v-else-if juga mesti digunakan bersama-sama dengan arahan v-if atau v-show untuk menyatakan pertimbangan beberapa syarat. Ia boleh digunakan untuk menggantikan berbilang v-else if pernyataan. Berikut ialah contoh:

<template>
  <div>
    <h1 v-if="rating >= 9">优秀</h1>
    <h2 v-else-if="rating >= 6">良好</h2>
    <h3 v-else-if="rating >= 3">及格</h3>
    <h4 v-else>不及格</h4>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 8
    };
  }
};
</script>

Dalam contoh ini, berdasarkan nilai rating, kami menggunakan arahan v-if dan v-else-if untuk menentukan tahap rating dan menghasilkan tajuk yang berbeza dengan sewajarnya. Jika nilai penarafan lebih besar daripada atau sama dengan 9, tajuk yang sangat baik akan diberikan jika nilai penilaian lebih besar daripada atau sama dengan 6, tajuk yang baik akan diberikan jika nilai penilaian lebih besar daripada atau sama dengan 3, tajuk lulus akan diberikan; jika nilai penilaian lebih besar daripada atau sama dengan 3, tajuk lulus akan diberikan.

Ringkasan:
Dengan mempelajari dan menggunakan arahan pemaparan bersyarat seperti v-if, v-show, v-else dan v-else-if, kami boleh mengawal paparan dan penyembunyian komponen dan elemen secara fleksibel berdasarkan syarat. Mengikut keperluan perniagaan tertentu, memilih arahan yang sesuai untuk melaksanakan pemaparan bersyarat boleh menjadikan kod kami lebih ringkas dan boleh dibaca. Saya harap contoh kod yang disediakan dalam artikel ini dapat membantu anda memahami dengan lebih baik dan menggunakan teknik pemaparan bersyarat Vue.

Atas ialah kandungan terperinci Kemahiran pemaparan bersyarat Vue didedahkan: belajar menggunakan v-if, v-show, v-else, v-else-if untuk mencapai kawalan fleksibel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!