Rumah > Artikel > hujung hadapan web > Bagaimanakah vue mendapatkan nilai dom menjadi null
Sebagai pembangun Vue, mendapatkan nilai elemen DOM adalah masalah yang sering kita hadapi, tetapi apakah yang perlu kita lakukan apabila nilai yang kita peroleh ialah null
? Artikel ini akan memperkenalkan beberapa kaedah tentang cara Vue memperoleh nilai DOM null
untuk membantu pembangun mengendalikan situasi sedemikian dengan lebih baik.
Sebelum memperkenalkan kaedah mendapatkan nilai DOM null
, kita perlu memahami dahulu apakah nilai DOM null
.
DOM (Model Objek Dokumen), model objek dokumen, menghuraikan dokumen HTML dan XML ke dalam satu siri nod (termasuk nod elemen, nod atribut, nod teks, dll.) dan objek, dengan itu mencipta objek Dokumen yang boleh dimanipulasi.
Apabila kami memperoleh elemen DOM dalam Vue melalui $refs
atau kaedah lain, atas sebab tertentu, elemen itu mungkin tidak dipaparkan atau dipasang dan nilai elemen DOM yang diperoleh pada masa ini ialah null
.
this.$nextTick()
dalam Vue apabila beberapa elemen DOM perlu dimulakan selepas tika Vue dipaparkan. , kami boleh menggunakan kaedah this.$nextTick()
untuk menjalankan kod kami selepas DOM dikemas kini.
mounted() { this.$nextTick(() => { const dom = this.$refs.dom; if (dom === null) { console.log("DOM值为null"); } }); }
v-if
Apabila menggunakan Vue, kami biasanya menggunakan arahan v-if
untuk melakukan pertimbangan bersyarat sebelum memberikan elemen DOM untuk mengawal sama ada elemen DOM diberikan . Kita boleh menggunakan mekanisme ini untuk mendapatkan nilai DOM sebagai null
.
<template> <div> <child ref="child" v-if="show"></child> </div> </template> <script> export default { data() { return { show: false } }, mounted() { this.show = true; this.$nextTick(() => { const dom = this.$refs.child.$el; if (dom === null) { console.log("DOM值为null"); } }); } } </script>
Dalam kod di atas, kami mula-mula menetapkan show
kepada false
supaya komponen anak tidak dipaparkan. Kemudian tetapkan mounted
kepada show
dalam true
cangkuk kitaran hayat, dan kemudian gunakan kaedah $nextTick()
untuk mendapatkan nilai elemen DOM selepas DOM dikemas kini dan buat pertimbangan.
v-cloak
Arahan v-cloak
boleh digunakan untuk menyembunyikan teg templat Misai yang tidak dikompilasi semasa permulaan contoh Vue sehingga tika Vue sedia.
<template> <div> <div v-cloak v-if="isShow" ref="dom">{{message}}</div> </div> </template> <script> export default { data() { return { isShow: false, message: "DOM渲染完成" } }, mounted() { this.isShow = true; const dom = this.$refs.dom; if (dom === null) { console.log("DOM值为null"); } } } </script>
Dalam kod di atas, kami menggunakan arahan v-cloak
dan arahan v-if
pada masa yang sama untuk mengawal pemaparan dan penyembunyian elemen DOM. Selepas DOM diberikan, dapatkan nilai elemen DOM dan buat pertimbangan.
Mendapatkan nilai DOM kepada null
ialah masalah biasa dalam pembangunan Vue. Artikel ini memperkenalkan tiga kaedah menggunakan arahan this.$nextTick()
, v-if
dan arahan v-cloak
untuk mendapatkan nilai DOM null
dan menyediakan contoh kod yang sepadan. Pembangun boleh memilih satu atau lebih kaedah berdasarkan situasi khusus untuk menangani jenis masalah ini dengan lebih baik.
Atas ialah kandungan terperinci Bagaimanakah vue mendapatkan nilai dom menjadi null. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!