So erhalten Sie benutzerdefinierte Attribute in Vue

In Vue können wir benutzerdefinierte Attribute über die V-Bind-Anweisung an Elemente binden und diese benutzerdefinierten Attribute dann über JavaScript abrufen. Lassen Sie uns Schritt für Schritt lernen, wie Sie benutzerdefinierte Attribute erhalten.

1. Benutzerdefinierte Attribute an Elemente binden

Die v-bind-Direktive ermöglicht es uns, Attribute dynamisch an Elemente in der Form zu binden: v-bind: Attributname="Ausdruck", oder abgekürzt als: Attributname="Ausdruck".

Wir können eine benutzerdefinierte Attributdaten-ID wie folgt an das Element binden:

<template>
  <div>
    <p v-bind:data-id="userId">User ID</p>
  </div>
</template>

Wobei userId eine in den Daten der Komponente definierte Variable ist.

2. Benutzerdefinierte Attribute abrufen

Wir können dieses benutzerdefinierte Attribut über JavaScript abrufen. In Vue können wir die benutzerdefinierten Attribute des Elements während des mount()-Lebenszyklus abrufen. Der mount()-Lebenszyklus ist eine Hook-Funktion, die ausgelöst wird, nachdem die Vue-Instanz im DOM gemountet wurde. Zu diesem Zeitpunkt kann das DOM manipuliert werden.

Angenommen, wir haben das data-id-Attribut an das p-Element in der vorherigen Komponente gebunden, dann können wir das Attribut wie folgt erhalten:

<template>
  <div>
    <p v-bind:data-id="userId" ref="user">User ID</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: '123456'
    }
  },
  mounted() {
    const userEle = this.$refs.user;  //获取p元素
    const userId = userEle.getAttribute('data-id');  //获取自定义属性
    console.log(userId);  //打印出123456
  }
}
</script>

Im obigen Beispiel We Bindete das benutzerdefinierte Attribut data-id an das p-Element und gab dem p-Element über das ref-Attribut einen Referenznamen „Benutzer“. In der Funktion mount() erhalten wir das p-Element über this.$refs.user und rufen dafür die Methode getAttribute('data-id') auf, um das benutzerdefinierte Attribut abzurufen. Schließlich drucken wir den erhaltenen Wert aus und das Ergebnis ist 123456.

3. Verwenden benutzerdefinierter Attribute

Nachdem wir die benutzerdefinierten Attribute erhalten haben, können wir einige entsprechende Vorgänge ausführen. Wenn wir beispielsweise auf das p-Element klicken, wird der Wert des benutzerdefinierten Attributs des Elements angezeigt:

<template>
  <div>
    <p v-bind:data-id="userId" ref="user" @click="showId">User ID</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: '123456'
    }
  },
  methods: {
    showId() {
      const userEle = this.$refs.user;  //获取p元素
      const userId = userEle.getAttribute('data-id');  //获取自定义属性
      alert(userId);  //弹出该元素自定义属性的值
    }
  }
}
</script>

Oben erfahren Sie, wie Sie das benutzerdefinierte Attribut in Vue erhalten. Binden Sie benutzerdefinierte Eigenschaften über die v-bind-Direktive und rufen Sie diese benutzerdefinierten Eigenschaften dann über JavaScript ab. Schließlich können Sie diese Attribute bei Bedarf verwenden, um die Funktionalität von Vue zu erweitern.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie benutzerdefinierte Attribute in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!