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(()=>{
//函数
})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 composantLorsque 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>setPageMenu(index) {
//这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数
let getMenuText = this.$refs.menuItem[index].innerText;
}Articles associés :
Utiliser devtool dans webpack pour expliquer en détailComment utiliser les appels implicites en javascript ? Comment créer une grande application d'une seule page avec vue.jsComment 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.jsCe 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
