Cara melaksanakan pemaparan bersyarat dalam Vue

Cara melaksanakan pemaparan bersyarat dalam Vue

Vue ialah rangka kerja JavaScript yang popular dan fungsi terasnya ialah untuk melaksanakan pemaparan UI dipacu data. Dalam Vue, kami boleh mengawal kandungan yang diberikan dengan mudah melalui pertimbangan bersyarat dan merealisasikan fungsi pemaparan bersyarat. Artikel ini akan memperkenalkan cara menggunakan pemaparan bersyarat dalam Vue untuk mengawal paparan UI dalam situasi berbeza dan memberikan contoh kod khusus.

Terdapat dua kaedah utama pemaparan bersyarat dalam Vue: arahan v-jika dan arahan v-tunjuk. Penggunaan kedua-dua arahan ini adalah serupa, tetapi terdapat beberapa perbezaan halus dalam pelaksanaan asas.

1. Gunakan arahan v-if

Arahan v-if boleh mengawal sama ada elemen dipaparkan berdasarkan ungkapan benar atau salah. Apabila ungkapan itu benar, elemen akan dipaparkan ke dalam DOM apabila ungkapan itu palsu, ia akan dialih keluar daripada DOM. Kita boleh mencapai pemaparan bersyarat dengan menggunakan arahan v-if pada elemen HTML.

Sebagai contoh, kami mempunyai pembolehubah keadaan isShow, yang menentukan sama ada untuk memaparkan butang berdasarkan nilai isShow. Anda boleh menggunakan arahan v-if dalam templat HTML seperti ini:

<button v-if="isShow">按钮</button>

Isytiharkan pembolehubah isShow dalam pilihan data bagi contoh Vue dan tetapkan nilai awal. Dengan mengubah suai nilai isShow, kami boleh menunjukkan dan menyembunyikan butang.

var app = new Vue({
  el: '#app',
  data: {
    isShow: true  // 是否显示按钮
  }
});

Apabila nilai isShow adalah benar, butang akan dipaparkan ke dalam DOM apabila nilai isShow adalah palsu, butang akan dialih keluar daripada DOM.

2. Gunakan arahan v-show

Arahan v-show adalah serupa dengan arahan v-if, dan boleh mengawal paparan dan penyembunyian elemen berdasarkan ungkapan benar atau salah. Perbezaannya ialah arahan v-show hanya mengawal nilai paparan atribut CSS elemen, dan bukannya mengalih keluar terus elemen daripada DOM. Apabila ungkapan benar, elemen dipaparkan apabila ungkapan palsu, elemen disembunyikan. Menggunakan arahan v-show dalam templat HTML juga sangat mudah:

<button v-show="isShow">按钮</button>

Begitu juga, isytiharkan pembolehubah isShow dalam pilihan data tika Vue dan tetapkan nilai awal padanya. Dengan mengubah suai nilai isShow, kami boleh mengawal paparan dan menyembunyikan butang.

var app = new Vue({
  el: '#app',
  data: {
    isShow: true  // 是否显示按钮
  }
});

Apabila nilai isShow adalah benar, butang dipaparkan; apabila nilai isShow adalah palsu, butang itu tersembunyi. Berbanding dengan v-if, v-show mempunyai prestasi yang lebih baik dan sesuai untuk situasi di mana penukaran keadaan paparan yang kerap diperlukan.

Ringkasan:

Fungsi pemaparan bersyarat dalam Vue boleh dilaksanakan melalui arahan v-if dan arahan v-show. Arahan v-if boleh memaparkan atau mengalih keluar elemen secara dinamik berdasarkan ungkapan benar atau salah, manakala arahan v-show menunjukkan atau menyembunyikan elemen dengan mengawal sifat CSSnya. Pilih kaedah pemaparan bersyarat yang sesuai mengikut keperluan sebenar untuk mencapai prestasi dan pengalaman pengguna yang lebih baik.

Di atas ialah pengenalan dan contoh kod cara melaksanakan pemaparan bersyarat dalam Vue Sila ikuti langkah dalam artikel untuk cuba menggunakan pemaparan bersyarat dalam projek Vue anda sendiri. Harap ini membantu!

Atas ialah kandungan terperinci Cara melaksanakan pemaparan bersyarat dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!