Kemahiran aplikasi lanjutan pemaparan bersyarat Vue: mahir menggunakan v-if, v-show, v-else, v-else-if untuk mencipta antara muka yang kompleks

Kemahiran aplikasi lanjutan pemaparan bersyarat Vue: mahir menggunakan v-if, v-show, v-else, v-else-if untuk mencipta antara muka yang kompleks#🎜🎜 #

Pengenalan:

Vue ialah rangka kerja JavaScript popular yang boleh membantu pembangun membina antara muka pengguna yang responsif. Vue menyediakan keupayaan pemaparan bersyarat yang berkuasa, termasuk arahan seperti v-if, v-show, v-else dan v-else-if. Arahan ini boleh memaparkan atau memaparkan elemen secara dinamik mengikut keadaan, dengan itu merealisasikan paparan dan interaksi antara muka yang kompleks.

Artikel ini akan memperkenalkan cara menggunakan arahan v-if, v-show, v-else dan v-else-if dengan mahir untuk melaksanakan antara muka yang kompleks, dan menyediakan contoh kod khusus.

v-if: Arahan
1. v-if digunakan untuk menjadikan elemen atau komponen yang hanya akan dipaparkan jika syarat itu benar. Sebagai contoh, kami boleh memaparkan komponen yang berbeza berdasarkan status log masuk pengguna:
   

<template>
  <div>
    <div v-if="isLoggedIn">
      用户已登录
    </div>
    <div v-else>
      用户未登录
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    };
  }
};
</script>

v-show:
2. v-show arahan juga digunakan untuk paparan berdasarkan pada syarat Atau sembunyikan elemen, tetapi ia melakukannya dengan mengubah suai sifat CSS elemen dan bukannya benar-benar menjadikan elemen itu ke dalam DOM. Ini bermakna arahan v-show berfungsi dengan lebih baik apabila bertukar antara menunjukkan dan bersembunyi. Dalam contoh berikut, kami boleh memaparkan butang berbeza berdasarkan kebenaran pengguna:
   

<template>
  <div>
    <button v-show="isAdmin">删除</button>
    <button v-show="!isAdmin">只读</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false
    };
  }
};
</script>

v-else dan v-else-if:
3. v- The else arahan digunakan untuk menukar antara elemen bersebelahan arahan v-jika, yang bermaksud "lain". Arahan v-else mesti segera mengikut arahan v-if, dan tiada unsur atau arahan lain boleh dimasukkan ke dalamnya. Sebagai contoh, kami boleh memaparkan iklan yang berbeza berdasarkan kumpulan umur pengguna:
   

<template>
  <div>
    <div v-if="age < 18">
      <img  src="kids-ad.jpg" alt="Kemahiran aplikasi lanjutan pemaparan bersyarat Vue: mahir menggunakan v-if, v-show, v-else, v-else-if untuk mencipta antara muka yang kompleks" >
    </div>
    <div v-else-if="age < 40">
      <img  src="adults-ad.jpg" alt="Kemahiran aplikasi lanjutan pemaparan bersyarat Vue: mahir menggunakan v-if, v-show, v-else, v-else-if untuk mencipta antara muka yang kompleks" >
    </div>
    <div v-else>
      <img  src="elderly-ad.jpg" alt="Kemahiran aplikasi lanjutan pemaparan bersyarat Vue: mahir menggunakan v-if, v-show, v-else, v-else-if untuk mencipta antara muka yang kompleks" >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 25
    };
  }
};
</script>

Perlu diambil perhatian bahawa arahan v-else-if mesti mengikut v-if atau v-else selepas arahan -jika, dan tiada unsur atau arahan lain boleh dimasukkan ke dalamnya.

Kesimpulan:

Fungsi pemaparan bersyarat Vue menyediakan pelbagai arahan, seperti v-if, v-show, v-else dan v-else-if, yang boleh berdasarkan berbeza keadaan. Artikel ini memperincikan penggunaan arahan ini dan menyediakan contoh kod khusus. Dengan bijak menggunakan arahan ini, pembangun boleh memaparkan dan berinteraksi dengan mudah dengan antara muka yang kompleks.

Ringkasnya, fungsi pemaparan bersyarat Vue ialah salah satu alat penting untuk membangunkan antara muka yang kompleks, dan ia berbaloi untuk dipelajari dan dikuasai oleh pembangun.

(bilangan perkataan: 455)

Atas ialah kandungan terperinci Kemahiran aplikasi lanjutan pemaparan bersyarat Vue: mahir menggunakan v-if, v-show, v-else, v-else-if untuk mencipta antara muka yang kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!