So erhalten Sie Dom-Elemente in Vue

In diesem Artikel werden hauptsächlich die Vorsichtsmaßnahmen für Vue zum Erhalten von Dom-Elementen und der Inhalt von Vue zum Erhalten von Dom-Elementen vorgestellt.

mounted(){
    setTimeout(()=>{
     this.contentToggle();
    },1000)
  },

methods:{
   contentToggle(){
    console.log(this.$refs.bodyFont.offsetHeight);
   }
  }

Vue möchte im Allgemeinen die Höhe von Dom-Elementen erhalten , wir alle Wir können uns vorstellen, es in der gemounteten Funktion zu schreiben, das heißt, es nach dem Laden des Doms abzurufen, aber das Ergebnis ist nicht das, was wir dachten. Wir haben auch darüber nachgedacht, ein

this.$nextTick(()=>{
   
    //函数
})

zu verwenden, um es zu bekommen , aber festgestellt, dass es überhaupt nutzlos ist/. .

Eine gute Möglichkeit ist die Verwendung eines setTimeout-Timers. Die Zeit kann auf 0 gesetzt werden, aber manchmal wird sie wirksam und manchmal wird sie nicht wirksam Sie können sicherstellen, dass Sie es erhalten, nachdem der Dom geladen wurde. Dieses Prinzip gilt für viele Werteübertragungsprobleme in Vue. Wenn Sie den übergebenen Wert zu Beginn nicht erhalten können, verwenden Sie einfach ein setTimeout.

ps: VUE ruft den Inhalt des DOM-Elements ab

Dom-Element über Ref abrufen

Überprüfen Sie den Ref auf dem Vue offizielle Website Erklärung

ref wird verwendet, um Referenzinformationen zu Elementen oder Unterkomponenten zu registrieren. Referenzinformationen werden im $refs-Objekt der übergeordneten Komponente registriert. Bei Verwendung auf einem normalen DOM-Element zeigt die Referenz auf das DOM-Element; bei Verwendung auf einer Unterkomponente verweist die Referenz auf die Komponenteninstanz

Wenn v-for auf einem Element oder einer Komponente verwendet wird, sind die Referenzinformationen wird ein Array sein, das DOM-Knoten oder Komponenteninstanzen enthält

Der Effekt, den ich jetzt erreichen möchte, besteht beispielsweise darin, auf das mit v-for generierte li zu klicken und den Wert des Elements abzurufen

Zuerst , das aktuell angeklickte li-Element abrufen, was wir tun müssen:

1 Fügen Sie dem Dom ein Click-Ereignis und ein Ref-Attribut hinzu

<li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem">
  <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>

2 Verwenden Sie dann ref in der Click-Event-Methode

setPageMenu(index) {
//这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数
  let getMenuText = this.$refs.menuItem[index].innerText;
}

Das oben Gesagte bin ich. Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Devtool im Webpack verwenden, um es im Detail zu erklären

Wie verwende ich implizite Aufrufe in Javascript?

So erstellen Sie eine große Single-Page-Anwendung mit vue.js

Wie Sie den WeChat-Freundeskreis zum Teilen implementieren und Freunde in Vue senden

Erklären Sie, wie Sie Vuex implementieren (ausführliches Tutorial)

Implementieren Sie die WeChat-Zahlung über vue.js

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Dom-Elemente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!