


Comment ajouter des attributs à vue (deux méthodes)
Il existe deux façons d'ajouter des attributs dans Vue :
Méthode 1 : En définissant les attributs directement dans les données
Nous pouvons définir les attributs correspondants dans les données de Vue et les utiliser dans les instances Vue.
Par exemple, si nous voulons maintenant ajouter un attribut à l'instance Vue, nous pouvons l'écrire comme ceci :
<div id="app"> <p>{{message}}</p> <button @click="setAttr">添加属性</button> </div>
<script> let app = new Vue({ el: '#app', data: { message: 'Hello World!', attr: '我是新添加的属性' }, methods: { setAttr() { this.$set(this, 'attr', '我是新添加的属性'); } } }); </script>
Dans le code ci-dessus, nous définissons une application d'instance Vue. Il y a deux attributs message et attr dans les données. . La valeur initiale du message est " Hello World ! ", la valeur initiale de attr est " Je suis un attribut nouvellement ajouté ". Dans la méthode setAttr, nous utilisons $set pour ajouter la valeur de l'attribut attr et remplaçons l'attribut attr dans les données par "Je suis un attribut nouvellement ajouté".
Méthode 2 : Définir des instructions globales et locales via Vue.directive
Vue.directive est une méthode globale dans Vue utilisée pour personnaliser les instructions. Elle peut définir une instruction globale dans une instance Vue pour faire fonctionner le DOM.
Supposons que nous devions maintenant ajouter un attribut désactivé à un bouton, nous pouvons écrire comme ceci :
<div id="app"> <button v-custome-attr>按钮</button> </div>
<script> Vue.directive('custome-attr', function(el, binding) { el.setAttribute('disabled', true); }); let app = new Vue({ el: '#app' }); </script>
Dans le code ci-dessus, nous utilisons la méthode Vue.directive pour définir une directive globale custome-attr et ajouter cette directive au bouton .
Dans la fonction de commande, nous utilisons la méthode setAttribute pour ajouter l'attribut désactivé à l'élément bouton afin d'obtenir l'effet de désactiver le bouton.
Résumé :
Grâce aux deux méthodes ci-dessus, nous pouvons facilement ajouter des propriétés dans Vue. Méthode 1 : lors de l'ajout d'attributs à une instance, vous pouvez directement utiliser $set pour ajouter ou modifier des attributs dans les données. La méthode 2 utilise la méthode Vue.directive pour définir des instructions globales et ajouter les instructions correspondantes aux éléments pour faire fonctionner le DOM.
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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

L'article traite de l'utilisation Effecte dans React, un crochet pour gérer les effets secondaires comme la récupération des données et la manipulation DOM dans les composants fonctionnels. Il explique l'utilisation, les effets secondaires courants et le nettoyage pour éviter des problèmes comme les fuites de mémoire.

Le chargement paresseux retarde le chargement du contenu jusqu'à ce qu'il soit nécessaire, améliorant les performances du Web et l'expérience utilisateur en réduisant les temps de chargement initiaux et la charge du serveur.

Les fonctions d'ordre supérieur dans JavaScript améliorent la concision du code, la réutilisabilité, la modularité et les performances par abstraction, modèles communs et techniques d'optimisation.

L'article traite du curry dans JavaScript, une technique transformant les fonctions mulguments en séquences de fonctions à argument unique. Il explore la mise en œuvre du currying, des avantages tels que des applications partielles et des utilisations pratiques, améliorant le code

L'article explique l'algorithme de réconciliation de React, qui met à jour efficacement le DOM en comparant les arbres DOM virtuels. Il traite des avantages de la performance, des techniques d'optimisation et des impacts sur l'expérience utilisateur. Compte de charge: 159

L'article discute de la prévention des comportements par défaut dans les gestionnaires d'événements à l'aide de la méthode empêchée dedEfault (), de ses avantages tels que une expérience utilisateur améliorée et des problèmes potentiels tels que les problèmes d'accessibilité.

L'article explique UseContext dans React, qui simplifie la gestion de l'État en évitant le forage des accessoires. Il traite des avantages tels que les améliorations centralisées de l'État et des performances grâce à des redevances réduites.

L'article traite des avantages et des inconvénients des composants contrôlés et incontrôlés dans la réaction, en se concentrant sur des aspects tels que la prévisibilité, la performance et les cas d'utilisation. Il conseille les facteurs à considérer lors du choix entre eux.
