Cara melakukan manipulasi DOM dalam Uni-app

Apl Uni ialah rangka kerja yang boleh membangunkan aplikasi merentas platform dengan cepat. Ia menyokong berbilang platform, seperti applet WeChat, APP, H5, dll. Berbanding dengan menggunakan pembangunan asli, ia boleh meningkatkan kecekapan pembangunan dan kebolehgunaan semula kod. Walau bagaimanapun, dalam pembangunan, kita tidak dapat tidak perlu melakukan operasi DOM, jadi dalam artikel ini, kita akan membincangkan cara melaksanakan operasi DOM dalam Uni-app.

Operasi DOM merujuk kepada mengubah suai Model Objek Dokumen. Dalam Uni-app, pelaksanaan operasi DOM adalah serupa dengan aplikasi web biasa, tetapi terdapat sedikit perbezaan. Uni-app terutamanya menggunakan dua kaedah untuk operasi DOM: arahan Vue sendiri dan operasi kod js.

Mula-mula mari kita lihat arahan yang disertakan dengan Vue. Vue datang dengan banyak arahan, seperti v-if, v-for, v-on, dsb. Melalui arahan ini, kami boleh melakukan operasi DOM dengan mudah. Mengambil v-if sebagai contoh, kita boleh menggunakan arahan ini untuk mengawal sama ada sesuatu elemen disembunyikan. Berikut ialah contoh mudah:

<template>
  <div>
    <div v-if="isShow">这是一个显示的元素</div>
    <button @click="changeIsShow">点击切换</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isShow: true,
      };
    },
    methods: {
      changeIsShow() {
        this.isShow = !this.isShow;
      },
    },
  };
</script>

Dalam kod di atas, kami menggunakan arahan v-if untuk menentukan sama ada mahu memaparkan "Ini ialah elemen yang dipaparkan". Apabila isShow adalah benar, elemen akan dipaparkan, jika tidak ia akan disembunyikan. Pada masa yang sama, kami juga menggunakan butang untuk menukar nilai isShow untuk memaparkan dan menyembunyikan elemen.

Selain arahan v-if, terdapat arahan lain yang juga boleh melaksanakan operasi DOM. Sebagai contoh, v-for boleh digunakan untuk menggelungkan melalui tatasusunan atau objek dan menjadikan elemen yang sepadan boleh digunakan untuk mengikat atribut atau gaya elemen v-on boleh digunakan untuk mendengar acara, dsb. Cara menggunakan arahan ini boleh didapati dalam dokumentasi rasmi Vue.

Sudah tentu, kadangkala kita perlu mengendalikan DOM dengan lebih fleksibel, maka kita perlu menggunakan kod js untuk beroperasi. Dalam aplikasi Uni, kita boleh menggunakan JS asli untuk manipulasi DOM sama seperti dalam aplikasi web biasa. Berikut ialah contoh mudah:

<template>
  <div>
    <div ref="test">这是一个元素</div>
    <button @click="changeElement">点击修改元素</button>
  </div>
</template>
<script>
  export default {
    methods: {
      changeElement() {
        const test = this.$refs.test;
        test.style.color = 'red';
        test.innerText = '这是一个修改过的元素';
      },
    },
  };
</script>

Dalam kod di atas, kita mula-mula menggunakan atribut ref pada elemen div Fungsi atribut ini adalah untuk menetapkan rujukan untuk elemen, yang sesuai untuk kami untuk digunakan dalam panggilan masuk kod JS. Dalam kaedah changeElement, kami memperoleh elemen melalui ini.$refs.test, dan mengubah suai teks dan warnanya untuk merealisasikan pengubahsuaian elemen.

Selain mengubah suai teks dan gaya elemen, kami juga boleh menggunakan beberapa API JS lain untuk melaksanakan operasi DOM, seperti appendChild, removeChild, insertBefore, dll., yang tidak akan disenaraikan di sini.

Ringkasnya, untuk melaksanakan operasi DOM dalam Uni-app, kami boleh sama ada menggunakan arahan Vue sendiri atau menggunakan API JS asli untuk beroperasi. Tidak kira kaedah yang digunakan, perhatian perlu diberikan kepada kebolehbacaan kod dan isu prestasi untuk memastikan kestabilan dan kecekapan aplikasi.

Atas ialah kandungan terperinci Cara melakukan manipulasi DOM dalam Uni-app. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!