Comment utiliser $refs dans vue

Cette fois, je vais vous montrer comment utiliser $refs dans vue, et quelles sont les précautions pour utiliser $refs dans vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

D'une manière générale, pour obtenir des éléments DOM, vous avez besoin d'un <a href="http://www.php.cn/code/658.html" target="_blank">document<code><a href="http://www.php.cn/code/658.html" target="_blank">document</a>.querySelector（".input1"） . querySelector(".input1")Obtient ce nœud dom, puis obtient la valeur de input1.

Mais après la liaison avec ref, nous n'avons plus besoin d'obtenir le nœud dom. Nous pouvons directement lier input1 à l'entrée ci-dessus, puis l'appeler dans $refs.

Ensuite, appelez-le comme ceci en javascript : this.$refs.input1 Cela peut réduire la consommation d'obtention des nœuds dom

est utilisé comme suit :

. 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>

Ce qui suit présente l'utilisation de base de vue $refs. Le code spécifique est le suivant :

<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>

. De manière générale, pour obtenir l'élément DOM, vous devez document.querySelector（".input1"） obtenir le nœud dom, puis obtenir la valeur de input1.

Mais après la liaison avec ref, nous n'avons plus besoin d'obtenir le nœud dom. Nous pouvons directement lier input1 à l'entrée ci-dessus, puis l'appeler dans $refs.

Alors appelez-le comme ceci en javascript : this.$refs.input1 Cela peut réduire la consommation d'obtention des nœuds dom

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, veuillez venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser vue pour optimiser les performances de vérification SMS

Comment implémenter vue-i18n et vue en vue projet element-ui développement international

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!