Contoh komponen penomboran di Vue
Untuk melaksanakan komponen Paging Vue yang boleh diguna semula, perkara utama berikut perlu dijelaskan: 1. Tentukan alat peraga termasuk jumlah baris, bilangan baris setiap halaman dan nombor halaman semasa; 2. Kirakan jumlah halaman; 3. Secara dinamik menjana array nombor halaman yang dipaparkan; 4. Proses Nombor Halaman Klik Acara dan lulus ke komponen induk; 5. Tambah gaya dan butiran interaksi. Menerima data melalui prop dan tetapkan nilai lalai, gunakan atribut yang dikira untuk mengira jumlah halaman, gunakan kaedah untuk menghasilkan array nombor halaman yang dipaparkan sekarang, membuat butang dalam templat dan mengikat peristiwa klik untuk mencetuskan kemas kini: Acara halaman semasa, dengar pada komponen induk untuk mengemas kini nombor halaman semasa.
Jika anda menggunakan VUE untuk membangunkan projek yang memerlukan fungsi paging, seperti sistem pengurusan backend atau platform paparan kandungan, adalah perlu untuk melaksanakan komponen paging yang boleh diguna semula. Di sini kita akan bercakap secara ringkas tentang beberapa perkara utama dan memberikan contoh asas tetapi praktikal komponen penomboran Vue.
Struktur asas dan penyediaan data
Sebelum menulis komponen, jelaskan data yang anda perlukan:
- Nombor Halaman Semasa (CurrentPage)
- TotalItems
- Berapa banyak keping yang dipaparkan setiap halaman (halaman)
- Pilihan: Bilangan maksimum nombor halaman untuk dipaparkan (seperti sehingga 5 nombor halaman untuk dipaparkan)
Anda boleh lulus ini sebagai prop atau dari komponen induk. Contohnya:
Props: {
Jumlah: {Type: Number, Diperlukan: Benar},
halaman: {type: nombor, lalai: 10},
CurrentPage: {type: Number, Default: 1}
}Kemudian hitung jumlah halaman berdasarkan ini:
dikira: {
totalPages () {
kembali math.ceil (this.total / this.pagesize)
}
}Membuat butang nombor halaman
Amalan biasa adalah untuk memaparkan satu atau dua nombor halaman di sebelah kiri dan kanan halaman semasa untuk mengelakkan terlalu banyak butang. Sebagai contoh, jika kini pada halaman 5, sehingga 5 butang dipaparkan, maka 3, 4, 5, 6, dan 7 harus dipaparkan.
Anda boleh menjana pelbagai nombor halaman untuk dipaparkan dalam satu cara:
Kaedah: {
getPagenumbers () {
const maxbuttons = 5
halaman const = []
const Half = Math.Floor (MaxButtons / 2)
Biarkan permulaan = math.max (1, this.currentPage - separuh)
Let end = math.min (this.totalpages, mula maxButtons - 1)
// Jika berhampiran hujung, laraskan titik permulaan ke hadapan jika (akhir - mula <maxButtons - 1) {
mula = math.max (1, end - maxButtons 1)
}
untuk (biarkan i = mula; i <= end; i) {
halaman.push (i)
}
Halaman pulangan
}
}Dengan cara ini, anda boleh membuat butang nombor halaman dinamik dalam templat.
Mengendalikan Nombor Halaman Klik dan Penghantaran Acara
Apabila pengguna mengklik pada nombor halaman, anda harus lulus nilai nombor halaman baru ke komponen induk melalui $emit dan biarkan ia mengendalikan kemas kini data.
<div class = "Pagination">
<butang @click = "$ emit ('update: current-page', 1)": disabled = "currentPage === 1"> home </button>
<butang v-for = "halaman dalam pagenumber"
: kunci = "halaman"
@click = "$ emit ('update: current-page', page)"
: class = "{Active: CurrentPage === Page}">
{{page}}
</butang>
<butang @click = "$ emit ('update: current-page', totalPages)": disabled = "currentPage === TotalPages"> Halaman terakhir </Button>
</div>Apabila menggunakan komponen paging ini dalam komponen induk, anda boleh mengikatnya seperti ini:
<Pagination : total = "100" : halaman semasa = "CurrentPage" @update: current-page = "currentPage = $ event" />
Perincian gaya dan interaksi
- Ia sangat biasa untuk menambah gaya sorotan ke
.activesemasa. - Anda juga boleh menambah butang "Halaman Sebelumnya" atau "Halaman Seterusnya" untuk mengelakkan operasi tidak sah.
- Sekiranya terdapat terlalu banyak nombor halaman, anda juga boleh menambah ellipsis (...) untuk menunjukkan bahawa terdapat nombor halaman tersembunyi di tengah, tetapi ini akan menjadi lebih rumit.
- Adalah disyorkan untuk memudahkan bilangan butang untuk mengelakkan menyentuh secara tidak sengaja.
Pada dasarnya itu sahaja. Komponen paging yang mudah tidak perlu terlalu kompleks, tetapi sangat praktikal untuk mempunyai logik yang jelas dan interaksi yang munasabah.
Atas ialah kandungan terperinci Contoh komponen penomboran di Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Pintu masuk percuma ke laman web sumber produk Vue selesai. Produk siap Vue lengkap dilihat secara kekal dalam talian
Jul 23, 2025 pm 12:39 PM
Artikel ini telah memilih satu siri laman web sumber produk siap peringkat tinggi untuk pemaju dan pelajar Vue. Melalui platform ini, anda boleh menyemak imbas, belajar, dan juga menggunakan semula projek lengkap Vue berkualiti tinggi secara dalam talian secara percuma, dengan itu dengan cepat meningkatkan kemahiran pembangunan dan keupayaan amalan projek anda.
Apakah cangkuk kitaran hayat Vue? Namakan beberapa dan terangkan kes penggunaannya.
Jul 24, 2025 am 12:08 AM
Cangkuk kitaran hidup komponen VUE digunakan untuk melaksanakan kod pada peringkat tertentu. 1. Dibuat: Dipanggil dengan serta -merta selepas komponen dibuat, sesuai untuk memulakan data; 2.Mounted: Dipanggil selepas komponen dipasang ke DOM, sesuai untuk mengendalikan DOM atau memuat sumber luaran; 3.Updated: Dipanggil apabila kemas kini data menyebabkan komponen disampaikan semula, sesuai untuk bertindak balas terhadap perubahan data; 4.BeforeUnmount: Dipanggil sebelum komponen dipasang, sesuai untuk pembersihan acara atau pemasa acara untuk mengelakkan kebocoran memori. Cangkuk ini membantu pemaju dengan tepat mengawal tingkah laku komponen dan mengoptimumkan prestasi.
Apa yang menyebabkan menyekat CSS?
Jul 12, 2025 am 01:32 AM
Menyekat menyekat CSS merujuk kepada lembaran gaya yang penyemak imbas akan menyekat rendering laman web sebelum memuat turun dan pemprosesan selesai. Apabila penyemak imbas memuat laman web, ia perlu menghuraikan HTML dan membina model objek dokumen (DOM). Sekiranya tag ditemui, ia berhenti sejenak sehingga fail CSS dimuatkan sepenuhnya dan dihuraikan, yang dipanggil "Memberi Penyekatan". 1. Dalam talian CSS kritikal: Ekstrak CSS yang diperlukan untuk kandungan skrin pertama dan membenamkannya terus ke HTML; 2. Lazy memuatkan CSS bukan kritikal: Gunakan teknologi pemuatan malas JavaScript untuk memuatkan CSS yang tidak penting selepas rendering halaman awal; 3. Split CSS ke Pakej: Sediakan gaya yang diperlukan terlebih dahulu, dan selebihnya akan dimuatkan kemudian; 4. Gunakan sifat media: memuatkan helaian gaya tertentu melalui sifat media, seperti
Bagaimana cara memasang Vue Router?
Jul 12, 2025 am 02:11 AM
Langkah -langkah untuk memasang Vuerouter adalah seperti berikut: 1. Sahkan bahawa projek itu dibuat berdasarkan VUE3 dan periksa versi VUE dalam pakej.json; 2. Jalankan npminstallvue-router@4 atau yarnaddvue-router@4 di terminal untuk memasang kebergantungan; 3. Buat fail router.js dan konfigurasikan jadual penghalaan, dan mulakan contoh penghalaan menggunakan Createrouter dan CreateWebhistory; 4. Memperkenalkan dan memasang contoh penghalaan di main.js ke aplikasi; 5. Perhatikan bahawa halaman perlu dimasukkan dan digunakan untuk navigasi, dan konfigurasikan pelayan untuk menyokong mod sejarah semasa penempatan.
Bagaimana cara mengisytiharkan mixins dalam ?
Jul 13, 2025 am 12:13 AM
Mengisytiharkan Mixin dalam Vue.js memerlukan pilihan Mixins untuk digunakan dalam ExportDefault {} komponen. Langkah -langkah tertentu adalah seperti berikut: 1. Tentukan objek Mixin yang mengandungi data, kaedah, cangkuk kitaran hayat, dan lain -lain; 2. Memperkenalkannya melalui Mixins: [Mixin] dalam komponen, menyokong definisi sebaris atau mengimport dari fail; 3. Pelbagai campuran boleh digunakan pada masa yang sama, dan urutan mixin mempengaruhi keutamaan gabungan, dan mixin kemudian dan atribut sendiri komponen lebih disukai; 4. Perhatikan konflik penamaan, atribut komponen akan menimpa sifat -sifat nama yang sama dalam mixin, dan cangkuk kitaran hidup akan dilaksanakan pada gilirannya, Mixin terlebih dahulu dan kemudian komponen.
Bagaimana cara menggunakan model V pada komponen tersuai?
Jul 14, 2025 am 01:02 AM
Untuk membolehkan V-Model dalam komponen Custom Vue, anda perlu: 1. Mengisytiharkan ModelValueProp; 2. Beritahu data komponen induk melalui $ emit ('kemas kini: model nilai'). Sebagai contoh, mengikat nilai model dalam input dan mencetuskan peristiwa. Jika anda perlu menyokong pelbagai model V (VUE3), anda boleh menggunakan kaedah penamaan seperti V-Model: Tajuk dan mengisytiharkan Prop dan Emit yang sepadan. Apabila mengekalkan pembolehubah secara dalaman, disyorkan untuk menggunakan data atau dikira untuk penyegerakan lapisan pertengahan untuk mengelakkan secara langsung mengubah suai prop.
Contoh komponen penomboran di Vue
Jul 26, 2025 am 08:49 AM
Untuk melaksanakan komponen Paging Vue yang boleh diguna semula, perkara utama berikut perlu dijelaskan: 1. Tentukan alat peraga termasuk jumlah baris, bilangan baris setiap halaman dan nombor halaman semasa; 2. Kirakan jumlah halaman; 3. Secara dinamik menjana array nombor halaman yang dipaparkan; 4. Proses Nombor Halaman Klik Acara dan lulus ke komponen induk; 5. Tambah gaya dan butiran interaksi. Menerima data melalui prop dan tetapkan nilai lalai, gunakan atribut yang dikira untuk mengira jumlah halaman, gunakan kaedah untuk menghasilkan array nombor halaman yang dipaparkan sekarang, membuat butang dalam templat dan mengikat peristiwa klik untuk mencetuskan kemas kini: Acara halaman semasa, dengar pada komponen induk untuk mengemas kini nombor halaman semasa.
Bagaimana cara mengikat atribut HTML secara dinamik dalam VUE?
Jul 11, 2025 am 12:42 AM
Cara yang paling biasa untuk mengikat atribut HTML secara dinamik dalam VUE adalah dengan menggunakan Arahan V-Bind. 1. Apabila mengikat atribut asas, seperti SRC atau HREF, anda boleh menggunakan v-ikatan: attr = "nilai" atau disingkat sebagai: attr = "nilai"; 2. Bagi atribut Boolean seperti dilumpuhkan, diperiksa, dan lain -lain, atribut akan diberikan apabila nilai mengikat adalah benar; 3. Pelbagai atribut boleh terikat pada satu masa melalui bentuk objek; 4. Nama kelas mengikat menyokong sintaks objek dan array, yang digunakan untuk menukar kelas secara dinamik; 5. Gaya mengikat boleh dilaksanakan melalui objek sebaris atau atribut data, menyokong penetapan gaya dinamik. Kaedah ini menjadikan Vue responsif
