Heim  >  Artikel  >  Web-Frontend  >  Wie binde ich HTML-Attribute in Vuejs?

Wie binde ich HTML-Attribute in Vuejs?

藏色散人
藏色散人Original
2019-04-04 10:27:133330Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn