So verwenden Sie $refs in Vue

Dieses Mal zeige ich Ihnen, wie Sie $refs in Vue verwenden und welche Vorsichtsmaßnahmen für die Verwendung von $refs in Vue gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Um DOM-Elemente zu erhalten, benötigen Sie im Allgemeinen ein <a href="http://www.php.cn/code/658.html" target="_blank">Dokument<code><a href="http://www.php.cn/code/658.html" target="_blank">document</a>.querySelector（".input1"） . querySelector(".input1")Ruft diesen Dom-Knoten ab und ruft dann den Wert von input1 ab.

Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht mehr erhalten. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann nennen Sie es in Javascript: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren.

wird wie folgt verwendet:

HTML:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>

JS:

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

Lassen Sie mich Ihnen die grundlegende Verwendung von vue $refs vorstellen. Der spezifische Code lautet wie folgt:

<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>

Im Allgemeinen zu bekommen Für DOM-Elemente müssen Siedocument.querySelector（".input1"）Diesen DOM-Knoten abrufen und dann den Wert von Eingabe1 abrufen.

Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht mehr erhalten. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.

Dann nennen Sie es in Javascript so: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte kommen Sie für weitere spannende Informationen. Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So nutzen Sie Vue zur Optimierung der SMS-Verifizierungsleistung

So implementieren Sie vue-i18n und vue in vue project element-ui internationale entwicklung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie $refs in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!