Wie binde ich HTML-Attribute in Vuejs?

In diesem Artikel erfahren Sie, wie Sie HTML-Attribute in VueJS binden.

Dies ist unser Startcode.

<template>
  <div>
    <h1>Binding atrributes in {{title}}</h1>
    <img src="" />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      title: "Vuejs",
      image: "logo.png"
    };
  }
};
</script>

Im obigen Code müssen wir die Daten des src-Attributs binden, um das Bild anzuzeigen.

Innerhalb von data haben wir das image:"logo.png"-Attribut. Jetzt müssen wir das src-Attribut mit dem image-Attribut verknüpfen, damit wir das Bild anzeigen können.

Das Problem besteht darin, dass die Syntax mit geschweiften Klammern {{}} keine Daten in HTML-Attributen binden kann.

<img src="{{image}}" /> //wrong: doesn&#39;t display any image

Um Daten in HTML-Attributen zu binden, stellt uns Vuejs eine Direktive zur Verfügung v-bind:atrributename.

<img v-bind:src="image" /> // 用户现在可以看到图像

Hier bindet die v-bind-Direktive das src-Attribut des Elements an den Wert des Ausdrucks image.

Wenn wir die v-bind-Direktive verwenden, können wir den JavaScript-Ausdruck in Anführungszeichen v-bind:src="js expression" auswerten.

v-bind:attributename kann auch eine abgekürzte Syntax schreiben: attributename.

<!-- fullhand syntax -->
<img v-bind:src="image" />

<!-- shorthand syntax -->
<img :src="image"/>

Ebenso können wir diese Syntax mit anderen HTML-Attributen verwenden.

<button :disabled="isActive">Click</button>

<a :href="url">My link</a>

<div :class="myClassname"></div>

In diesem Artikel geht es um die Methode zum Binden von HTML-Attributen in Vuejs. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonWie binde ich HTML-Attribute in Vuejs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!