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.

Apakah nilai DOM bagi null?

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 .

Cara untuk menjadikan nilai DOM menjadi batal

1 Gunakan 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");
    }
  });
}

2 Gunakan arahan 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.

3. Gunakan arahan 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.

Ringkasan

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!