Comment obtenir des éléments dom en vue

Cet article présente principalement les précautions de vue pour obtenir des éléments dom et le contenu de vue pour obtenir des éléments dom. Les amis dans le besoin peuvent s'y référer

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

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

Si vue souhaite obtenir la hauteur de dom. éléments, dans des circonstances normales, nous pouvons tous penser à l'écrire dans la fonction montée, c'est-à-dire à l'obtenir après le chargement du dom, mais le résultat n'est pas ce que nous pensions. Nous avons également pensé à utiliser un

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

<. 🎜> pour l'obtenir, mais j'ai trouvé que c'était inutile du tout/. .

Donc, un bon moyen est d'utiliser une minuterie setTimeout. Le temps peut être réglé sur 0, mais parfois il prend effet et parfois il ne prend pas effet. Il est plus sûr d'ajouter une petite valeur de temps pour que vous puissiez le faire. peut garantir que vous obtenez Cela doit être après le chargement du dom. Ce principe s'applique à de nombreux problèmes de transfert de valeur dans Vue. Si vous ne pouvez pas obtenir la valeur transmise au début, utilisez simplement un setTimeout.

ps : VUE obtient le contenu de l'élément DOM

Obtenez l'élément dom via la ref

Vérifiez la référence sur la vue site officiel Explication

ref est utilisé pour enregistrer des informations de référence sur des éléments ou des sous-composants. Les informations de référence seront enregistrées sur l'objet $refs du composant parent. Si elle est utilisée sur un élément DOM normal, la référence pointe vers l'élément DOM ; si elle est utilisée sur un sous-composant, la référence pointe vers l'instance du composant

Lorsque v-for est utilisé sur un élément ou un composant, les informations de référence sera un tableau contenant des nœuds DOM ou des instances de composants

Par exemple, l'effet que je veux obtenir maintenant est de cliquer sur le li généré avec v-for et d'obtenir la valeur de l'élément

Premier , obtenez l'élément li actuellement cliqué, ce que nous devons faire est

1 Ajouter l'événement click et l'attribut ref à dom

<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. Utilisez ensuite ref dans la méthode de l'événement click <. 🎜>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

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

Articles associés :

Utiliser devtool dans webpack pour expliquer en détail

Comment utiliser les appels implicites en javascript ?

Comment créer une grande application d'une seule page avec vue.js

Comment mettre en œuvre un cercle d'amis de partage WeChat et envoyer des amis en vue

Expliquez comment implémenter vuex (tutoriel détaillé)

Implémentez le paiement WeChat via vue.js

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!