So fügen Sie Attribute zu Vue hinzu (zwei Methoden)

Es gibt zwei Möglichkeiten, Attribute in Vue hinzuzufügen:

Methode 1: Durch Definieren von Attributen direkt in Daten

Wir können entsprechende Attribute in Vues Daten definieren und sie in Vue-Instanzen verwenden.

Wenn wir jetzt beispielsweise ein Attribut zur Vue-Instanz hinzufügen möchten, können wir es so schreiben:

<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>

Im obigen Code definieren wir eine Vue-Instanz-App. Die Daten enthalten zwei Attribute: message und attr Der Anfangswert von message ist „Hallo Welt!“, der Anfangswert von attr ist „Ich bin ein neu hinzugefügtes Attribut“. In der Methode setAttr verwenden wir $set, um den Wert des attr-Attributs hinzuzufügen und das attr-Attribut in den Daten durch „Ich bin ein neu hinzugefügtes Attribut“ zu ersetzen.

Methode 2: Definieren Sie globale und lokale Anweisungen über Vue.directive

Vue.directive ist eine globale Methode in Vue, die zum Anpassen von Anweisungen verwendet wird. Sie kann eine globale Anweisung in einer Vue-Instanz definieren, um das DOM zu betreiben.

Angenommen, wir müssen jetzt einer Schaltfläche ein deaktiviertes Attribut hinzufügen, können wir so schreiben:

<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>

Im obigen Code verwenden wir die Vue.directive-Methode, um eine globale Direktive „custome-attr“ zu definieren und fügen diese Direktive dem hinzu Taste .

In der Befehlsfunktion verwenden wir die setAttribute-Methode, um das deaktivierte Attribut zum Schaltflächenelement hinzuzufügen und so den Effekt der Deaktivierung der Schaltfläche zu erzielen.

Zusammenfassung:

Mit den beiden oben genannten Methoden können wir ganz einfach Eigenschaften in Vue hinzufügen. Methode 1: Beim Hinzufügen von Attributen zu einer Instanz können Sie $set direkt verwenden, um Attribute in Daten hinzuzufügen oder zu ändern. Methode 2 verwendet die Vue.directive-Methode, um globale Anweisungen zu definieren und entsprechende Anweisungen zu Elementen hinzuzufügen, um das DOM zu betreiben.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Attribute zu Vue hinzu (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!