Heim > Artikel > Web-Frontend > 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'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!