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!