Rumah > hujung hadapan web > uni-app > Bagaimanakah uniapp mengawal paparan dan penyembunyian elemen secara dinamik?

Bagaimanakah uniapp mengawal paparan dan penyembunyian elemen secara dinamik?

PHPz
Lepaskan: 2023-04-06 16:54:13
asal
2377 orang telah melayarinya

Dalam Uniapp, kami selalunya perlu menunjukkan atau menyembunyikan beberapa elemen halaman berdasarkan operasi pengguna atau syarat lain. Sebagai contoh, apabila pengguna mengklik butang, kita perlu memaparkan tetingkap timbul, atau memaparkan secara dinamik butang log masuk atau pendaftaran berdasarkan sama ada pengguna log masuk. Dalam kes ini, kita boleh menggunakan arahan v-show yang disediakan oleh Uniapp untuk mengawal paparan dan penyembunyian elemen secara dinamik.

Penggunaan arahan v-show adalah sangat mudah Anda boleh menambah arahan v-show kepada elemen yang perlu dikawal, dan kemudian menetapkan nilai arahan kepada nilai Boolean nilai adalah benar, elemen akan dipaparkan jika tidak elemen itu tersembunyi. Sebagai contoh, kita boleh mengawal paparan dan menyembunyikan tetingkap pop timbul pada butang:

<template>
  <view>
    <button @click="showDialog=true">显示弹窗</button>
    <view v-show="showDialog">这里是弹窗</view>
  </view>
</template>
Salin selepas log masuk

Dalam contoh ini, kami menetapkan pembolehubah showDialog kepada benar pada acara klik butang, supaya tetingkap pop timbul boleh dipaparkan. Pada elemen tetingkap pop timbul, kami menggunakan arahan v-show untuk mengawal paparan dan menyembunyikan tetingkap timbul Jika nilai pembolehubah showDialog adalah benar, tetingkap timbul dipaparkan, jika tidak, tetingkap timbul. tetingkap atas tersembunyi.

Selain menggunakan pembolehubah untuk mengawal nilai arahan v-show, anda juga boleh menggunakan ungkapan untuk mengawal nilai v-show. Sebagai contoh, kita boleh mengawal paparan atau menyembunyikan butang berdasarkan sama ada pengguna log masuk:

<template>
  <view>
    <button v-show="isLoggedIn">已登录</button>
    <button v-show="!isLoggedIn">未登录</button>
  </view>
</template>
Salin selepas log masuk

Dalam contoh ini, kami mengawal paparan dan menyembunyikan dua butang berdasarkan nilai pembolehubah isLoggedIn. Jika pembolehubah ini benar, butang "Log masuk" dipaparkan, jika tidak, butang "Tidak log masuk" dipaparkan.

Ringkasnya, arahan v-show ialah pembantu yang baik untuk kita mengawal paparan dan penyembunyian elemen secara dinamik dalam Uniapp. Dengan menggunakan arahan v-show dengan betul, kami boleh menjadikan elemen halaman menunjukkan keadaan berbeza dalam keadaan berbeza, dengan itu memberikan pengguna pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimanakah uniapp mengawal paparan dan penyembunyian elemen secara dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan