Maison  >  Article  >  interface Web  >  Deux façons pour Vue d'obtenir des éléments DOM et de définir des attributs

Deux façons pour Vue d'obtenir des éléments DOM et de définir des attributs

小云云
小云云original
2018-01-27 17:15:234940parcourir

Cet article vous propose principalement deux méthodes d'implémentation pour Vue pour obtenir des éléments DOM et définir des attributs. L'éditeur pense que c'est plutôt bien, alors je vais le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

J'ai pensé à 2 méthodes ici :

Méthode 1 :

Ajoutez l'identifiant directement à l'élément correspondant, puis document.getElementById("id") ; Obtenez-le, puis définissez les attributs ou styles correspondants

Méthode 2 :

Utilisez ref, ajoutez ref="name" à l'élément correspondant, puis utilisez this.$refs.name pour obtenir l'élément

Remarque : Avant d'obtenir l'élément correspondant, vous devez le monter dans le hook de montage, sinon la valeur obtenue sera vide

Si vous ajoutez un identifiant à un sous-composant. et en modifiant l'attribut personnalisé, directement Il chargera le p externe correspondant au sous-composant modifié et ne changera pas la valeur de l'attribut personnalisé d'origine du sous-composant

Si vous ajoutez une référence au sous-composant, alors récupérez le DOM élément et modifiez le self correspondant Définissez la valeur de l'attribut, vue signalera une erreur :

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"

Recommandations associées :

Utilisez l'attribut name de html pour obtenir l'élément dom

Plusieurs extensions et abréviations pour obtenir des compétences en objets DOM_javascript

Comment obtenir la position et la taille des éléments DOM en utilisant les connaissances JavaScript_Basic

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!

Déclaration:
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