Attributbindung

• 5 Minuten

Sie haben bereits erfahren, wie Daten auf einer Seite mithilfe von Handlebars ({{}}) angezeigt werden. Der Text auf der Seite ist jedoch nicht der einzige Bereich, der möglicherweise dynamisch aktualisiert werden muss.

Sie legen viele der Werte auf einer Seite fest, indem Sie entsprechende Attribute verwenden. Glücklicherweise ermöglicht Vue.js das Binden an Attribute mithilfe von Anweisungen.

Anweisungen

Anweisungen sind Attribute, die von Vue.js erkannt werden. Sie ermöglichen Ihnen das dynamische Setzen der Werte von HTML-Attributen. Alle Anweisungen beginnen mit v-.

v-Bind

Die Core-Anweisung ist v-bind. Sie ermöglicht Ihnen das Binden eines Datenwerts an ein Attribut. Sie können es verwenden, um den Namen einer Klasse, die Quelle für ein Bild oder einen Stil dynamisch zu setzenden.

Um diese Anweisung zu verwenden, platzieren Sie v-bind und einen Doppelpunkt (:) vor dem zu setzenden Attribut. Wenn Sie also das src-Attribut für ein Bild setzen möchten, verwenden Sie v-bind:src="value". Der Attributwert wird dann ähnlich wie bei Verwendung der {{ }}-Syntax ausgewertet.

Der folgende Code generiert das HTML-Element <img src="./media/sample.jpg">.

<div id="app">
    <img v-bind:src="imageSource" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                imageSource: './media/sample.jpg'
            }
        }
    }).mount('#app');
</script>

Die imageSource-Eigenschaft ist in der Vorlage verfügbar, da sie von der data()-Methode zurückgegeben wird. Anschließend wird sie an das src-Attribut des Image-Elements gebunden.

Binding-Kurzform

Sie haben gesehen, wie Sie die v-bind-Anweisung in ihrer Vue-App verwenden, um Daten an ein Attribut zu binden. Sie können diese Anweisung auch als Kurzform eingeben. Anstatt einzugeben v-bind:attribute, können Sie z. B. :attribute eingeben. Mit dieser Kurzform sparen Sie einige Zeichen.

Im Beispiel der gebundenen Bildquelle können Sie die Kurzform wie folgt verwenden.

<div id="app">
    <img v-bind:src="imageSource" />
</div>

Jetzt können Sie den folgenden Code eingeben.

<div id="app">
    <img :src="imageSource" />
</div>

Klasse und Stil

Typische für ein HTML-Element festlegbare Attribute sind die Attribute class oder style. Zum Binden an diese Attribute können Sie v-bind:class und v-bind:style verwenden. In Kurzform können Sie dabei :class und :style verwenden.

Klassenobjekte

Nehmen wir an, Sie entwickeln eine Anwendung mit zwei Klassen: centered und active. In HTML verwenden Sie diese Klassen wie folgt.

<div class='centered active'>Hello, Vue!</div>

Dieses Beispiel ist jedoch statisch. Wenn Sie die Daten dynamisch ändern möchten, können Sie eine Bindung verwenden. Vue ermöglicht die Bindung nicht nur für Zeichenfolgen, sondern auch für Objekte.

So tauschen Sie den statischen Wert centered active gegen eine andere Eigenschaft aus:

<div id="app">
    <div :class="classObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                classObject: {
                    centered: true,
                    active: true
                }
            }
        }
    }).mount('#app');
</script>

Die Daten-Eigenschaft classObject verfügt über zwei Eigenschaften mit booleschen Werten. Diese booleschen Werte ermöglichen es Ihnen, bestimmte Klassen zu aktivieren oder zu deaktivieren. Wenn Sie centered auf false festlegen, würde <div class="active"> gerendet werden, da active die einzige Eigenschaft ist, die weiterhin true ist.

Stil-Objekte

Beim Festlegen von Stilen in CSS werden Auflistungen von Schlüssel-Wert-Paaren erstellt. Die Darstellung des Stils mithilfe eines JavaScript-Objekts ist relativ natürlich. In Vue.js können Sie Stilobjekte erstellen, um den Stil festzulegen.

Wenn Sie z. B. die Hintergrundfarbe (background-color) des Stils eines HTML-Elements festlegen möchten, können Sie den folgenden Code verwenden.

<div id="app">
    <div :style="styleObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                styleObject: {
                    'background-color': 'red'
                }
            }
        }
    }).mount('#app');
</script>