Maison > interface Web > js tutoriel > Comment utiliser $réfs

Comment utiliser $réfs

php中世界最好的语言
Libérer: 2018-06-06 11:28:56
original
1816 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser $refs et quelles sont les précautions d'utilisation de $refs. Ce qui suit est un cas pratique, jetons un coup d'oeil.

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 pas 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 de nœuds dom

L'utilisation est la suivante :

HTML :

<.>
<p id="app">
  <input type="text" ref="input1"/>
  <button @click="add">添加</button>
</p>
Copier après la connexion
JS :

<script>
new Vue({
  el: "#app",
  methods:{
  add:function(){
    this.$refs.input1.value ="test"; //this.$refs.input1 减少获取dom节点的消耗
    }
  }
})
</script>
Copier après la connexion
Ce qui suit est une introduction à 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>
Copier après la connexion
De manière générale, à. Pour obtenir des éléments DOM, vous devez

Obtenir ce nœud dom, puis obtenir la valeur de input1. document.querySelector(".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 :

Gestion des mises à jour de la méthode des composants parents pour les composants enfants qui ne peuvent pas être rendus

Comment utiliser vuex pour faire fonctionner des objets d'état

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal