hujung hadapan web
View.js
Perbincangan ringkas tentang v-for dalam Vue, nilai utama mempengaruhi kesan peralihan dan kesan animasi (penjelasan kod terperinci)
Perbincangan ringkas tentang v-for dalam Vue, nilai utama mempengaruhi kesan peralihan dan kesan animasi (penjelasan kod terperinci)
Aug 19, 2021 am 09:43 AM
Dalam artikel sebelumnya "Ajar anda cara menggunakan Vue untuk mencapai kesan animasi (dengan kod) ", saya memperkenalkan anda cara menggunakan Vue untuk mencapai kesan animasi. Artikel berikut akan memberi anda pengenalan ringkas tentang kesan nilai utama dalam Vue pada kesan peralihan dan kesan animasi Rakan yang memerlukan saya harap ia akan membantu anda.
Mengenai perubahan susunan Vue.js dan v-for daripada key, ia mempengaruhi prestasi animasi peralihan
Mengenai Vue.js, nilai v-for mempengaruhi prestasi animasi peralihan Masalah ini timbul semasa menulis komponen key Mari kita lihat bahagian kod dahulu: Message
<!-- Notice： -->
<transition :name="transitionName" @enter="enter" @leave="leave">
...... ..
</transition>
<!-- JS: -->
<script>
export default {
methods: {
enter(e) {
e.style.height = e.scrollHeight + "px";
},
leave(e) {
e.style.height = 0;
},
},
};
</script>
<!-- CSS: -->
<style>
transition: all 0.2s ease-in-out;
</style>Komponen induk: <notice v-for="(item, index) in notices" :key="index"> ...... </notice>
: JS
data() {
return {
notices: []
};
},
//notices 新增的時候自動加入定時器來移除
setTimeout(() => {
let index = 0 //這里假設(shè)我已經(jīng)取得了移除的 index索引, 可能不是依次的123456
this.notices.splice(index, 1);
}, time) //time 為傳入的隨機(jī)不等值Secara teorinya apabila komponen anak dialih keluar, ia akan mempunyai ketinggian yang lancar untuk mengalihkan animasi daripada kepada 1 , tetapi sebaliknya, animasi itu hanya akan digunakan pada yang terakhir setiap kali apabila dialih keluar. Saya hairan, dan pelbagai pelaksanaan 0 dan js tidak begitu ideal. Masih tersepit satu demi satu. css
merentasi, satu nilai adalah sangat penting: forApabila key mempunyai nilai key, setiap kali tatasusunan ditukar, Number akan dipaparkan semula, jadi animasi hanya akan mempengaruhi yang terakhir setiap kali. dom
ialah key, setiap kali tatasusunan ditukar, String lalai kepada strategi "penggunaan semula di tempat" dom
jadi tukar kunci Apabila String, saya mahu hasilnya dilaksanakan dengan lancar dan berurutan Contoh tapak web rasmi yang sempurna ialah https://cn.vuejs.org/v2/guide/list.html#keyPerlu diingatkan di sini bahawa nilai
ialah key/String, jadi untuk mengelakkan tidak berulang, nilai Number hendaklah secara rawak tidak berulang key/string, jangan gunakan number lalai. index
Atas ialah kandungan terperinci Perbincangan ringkas tentang v-for dalam Vue, nilai utama mempengaruhi kesan peralihan dan kesan animasi (penjelasan kod terperinci). 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)
Penjelasan grafik terperinci tentang cara mengintegrasikan editor kod Ace dalam projek Vue
Apr 24, 2023 am 10:52 AM
Ace ialah editor kod boleh terbenam yang ditulis dalam JavaScript. Ia sepadan dengan fungsi dan prestasi penyunting asli seperti Sublime, Vim dan TextMate. Ia boleh dibenamkan dengan mudah ke dalam mana-mana halaman web dan aplikasi JavaScript. Ace dikekalkan sebagai editor utama untuk Cloud9 IDE dan merupakan pengganti kepada projek Mozilla Skywriter (Bespin).
Analisis prinsip Vue2 melaksanakan API komposisi
Jan 13, 2023 am 08:30 AM
Sejak keluaran Vue3, perkataan komposisi API telah memasuki bidang penglihatan pelajar yang menulis Vue. vue/composition-api plug-in, Pelajar Vue2 juga boleh menaiki bas Seterusnya, kami akan menggunakan ref responsif dan reaktif untuk menjalankan analisis mendalam tentang cara pemalam ini mencapai perkara ini.
Mari kita bincangkan tentang cara menggunakan API Amap dalam vue3
Mar 09, 2023 pm 07:22 PM
Apabila kami menggunakan Amap, pegawai mengesyorkan banyak kes dan tunjuk cara kepada kami, tetapi kes ini semua menggunakan kaedah asli untuk mengakses dan tidak memberikan tunjuk cara vue atau bertindak balas Ramai orang telah menulis tentang akses vue2 di Internet , kita akan melihat bagaimana vue3 menggunakan API Amap yang biasa digunakan saya harap ia akan membantu semua orang.
Terokai cara menulis ujian unit dalam Vue3
Apr 25, 2023 pm 07:41 PM
Vue.js telah menjadi rangka kerja yang sangat popular dalam pembangunan bahagian hadapan hari ini. Memandangkan Vue.js terus berkembang, ujian unit menjadi semakin penting. Hari ini kita akan meneroka cara menulis ujian unit dalam Vue.js 3 dan menyediakan beberapa amalan terbaik serta masalah dan penyelesaian biasa.
Analisis ringkas tentang cara vue melaksanakan muat naik menghiris fail
Mar 24, 2023 pm 07:40 PM
Dalam proses projek pembangunan sebenar, kadangkala perlu memuat naik fail yang agak besar, dan kemudian muat naik akan menjadi agak perlahan, jadi latar belakang mungkin memerlukan bahagian hadapan untuk memuat naik hirisan fail Sebagai contoh, 1 A aliran fail gigabait dipotong kepada beberapa aliran fail kecil, dan kemudian antara muka diminta untuk menghantar aliran fail kecil masing-masing.
Contoh terperinci vue3 merealisasikan kesan mesin taip chatgpt
Apr 18, 2023 pm 03:40 PM
Semasa saya bekerja di tapak cermin chatgpt, saya mendapati bahawa beberapa tapak cermin tidak mempunyai kesan kursor mesin taip, tetapi hanya output teks Adakah mereka tidak mahu melakukannya? Saya mahu melakukannya pula. Jadi saya mengkajinya dengan teliti dan menyedari kesan mesin taip ditambah kursor Sekarang saya akan berkongsi penyelesaian dan rendering saya
Perbandingan mudah sintaks JSX dan sintaks templat dalam Vue (analisis kelebihan dan kekurangan)
Mar 23, 2023 pm 07:53 PM
Dalam Vue.js, pembangun boleh menggunakan dua sintaks berbeza untuk mencipta antara muka pengguna: sintaks JSX dan sintaks templat. Kedua-dua sintaks mempunyai kelebihan dan kekurangannya sendiri Mari kita bincangkan perbezaan, kelebihan dan kekurangannya.
Ajar anda langkah demi langkah cara menggunakan Vue3 untuk melaksanakan fungsi menyeret elemen elegan
Mar 30, 2023 pm 08:57 PM
Bagaimana untuk melaksanakan fungsi seret elemen? Artikel berikut akan membawa anda langkah demi langkah untuk memahami cara menggunakan Vue3 untuk melaksanakan fungsi penyeretan elemen elegan, dan mempelajari mata pengetahuan yang berkaitan melalui contoh, saya harap ia akan membantu anda!
