Bagaimana untuk mendapatkan elemen dan mengubah suai gaya elemen dalam vue3

Keperluan: Dapatkan gaya elemen dan ubah suai gaya elemen

Operasi terbahagi terutamanya kepada bahagian berikut Rangka kerja kod lengkap dilampirkan di penghujung artikel

①Bind ref

<div ref=&#39;div&#39; style=&#39;width:&#39;50px&#39;>

②Dalam bahagian skrip, import ref dan nextTick

import { ref,nextTick} from 'vue'

③Dalam bahagian skrip, buat elemen untuk dikendalikan responsif, iaitu, mengikat ref

const div = ref()

④Menggunakan async await dan nextTick

//需要在元素绑定函数a 这里忽略
async function a () {
  await nextTick()
    div.value.style.width="100px"

Kesukarannya ialah mengapa anda perlu menggunakan async await dan nextTick

Jika anda tidak menggunakannya dengan cara ini, ralat akan dilaporkan: parameter 1 bukan daripada jenis ‘Element’

Sebab ralat ini ialah operator mengendalikan elemen yang belum diberikan , atau gaya yang dia mahu kendalikan belum mempunyai elemen yang sepadan lagi

Selepas mempelajari vue3, kami faham bahawa Dom telah dikemas kini selepas nextTick, jadi dengan menggabungkan async await dan nextTick, elemen itu boleh menjadi berkesan diubah suai selepas memaparkan

Gambar berikut adalah daripada dokumen rasmi vue3

Kod contoh operasi penuh:

rreeee

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan elemen dan mengubah suai gaya elemen dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!