Cara uniapp melaksanakan pemaparan bersyarat untuk mengawal paparan halaman

uniapp melaksanakan cara menggunakan pemaparan bersyarat untuk mengawal paparan halaman, yang memerlukan contoh kod khusus

Dalam pembangunan uniapp, kita selalunya perlu memutuskan sama ada untuk memaparkan atau menyembunyikan elemen tertentu dalam halaman berdasarkan syarat yang berbeza, yang memerlukan penggunaan syarat Rendering dicapai. Penyampaian bersyarat boleh membuat pertimbangan berdasarkan syarat yang diberikan dan secara selektif memberikan kandungan tertentu pada halaman berdasarkan keputusan penghakiman.

Dalam uniapp, terdapat dua cara untuk menggunakan pemaparan bersyarat: menggunakan arahan v-if dan menggunakan arahan v-show. Kedua-dua kaedah akan diterangkan di bawah, dengan contoh kod khusus.

Gunakan arahan v-if untuk melaksanakan pemaparan bersyarat:

Arahan v-if ialah salah satu arahan biasa yang disediakan oleh rangka kerja vue, yang boleh menentukan sama ada untuk menghasilkan elemen berdasarkan benar atau salah bagi ungkapan yang diberikan .

Mula-mula, tentukan elemen yang perlu diberikan secara bersyarat dalam teg templat, dan kemudian gunakan arahan v-if untuk menentukan syarat penghakiman. Jika syarat adalah benar, elemen akan diberikan; jika salah, elemen akan dialih keluar.

Kod khusus adalah seperti berikut:

<template>
  <view>
    <text v-if="showElement">我是需要渲染的元素</text>
    <text v-else>我是需要隐藏的元素</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showElement: true // 根据该值来决定元素的显示与隐藏
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan atribut showElement, yang nilainya menentukan paparan dan penyembunyian elemen yang memerlukan pemaparan bersyarat. Jika showElement adalah benar, "Saya adalah elemen yang perlu diberikan" akan dipaparkan; jika showElement adalah palsu, "Saya adalah elemen yang perlu disembunyikan" akan dipaparkan.

Gunakan arahan v-show untuk melaksanakan pemaparan bersyarat:

Arahan v-show juga merupakan salah satu arahan biasa yang disediakan oleh rangka kerja vue Ia boleh menentukan sama ada untuk memaparkan elemen berdasarkan benar atau salah sesuatu yang diberikan ungkapan.

Berbeza daripada arahan v-if, arahan v-show sebenarnya tidak mengalih keluar elemen daripada DOM, tetapi mengawal paparan dan menyembunyikannya dengan mengubah suai atribut paparan elemen.

Kod khusus adalah seperti berikut:

<template>
  <view>
    <text v-show="showElement">我是需要显示的元素</text>
    <text v-show="!showElement">我是需要隐藏的元素</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showElement: true // 根据该值来决定元素的显示与隐藏
    }
  }
}
</script>

Dalam kod di atas, kami juga mentakrifkan atribut showElement Nilai atribut ini menentukan paparan dan penyembunyian elemen yang perlu diberikan secara bersyarat. Jika showElement adalah benar, "Saya adalah elemen yang perlu dipaparkan" akan dipaparkan; jika showElement adalah palsu, "Saya adalah elemen yang perlu disembunyikan" akan dipaparkan. Perlu diingatkan bahawa menukar paparan dan menyembunyikan elemen melalui arahan v-show tidak akan mengubah kedudukan elemen dalam DOM.

Melalui dua kaedah di atas, kita boleh mengawal paparan dan penyembunyian elemen halaman dengan mudah berdasarkan syarat dalam uniapp. Memilih kaedah yang sesuai berdasarkan keperluan sebenar boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Atas ialah kandungan terperinci Cara uniapp melaksanakan pemaparan bersyarat untuk mengawal paparan halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!