Die Verwendung der Vue-Direktive v-bind und zu beachtende Punkte

1. v-bind: kann einige Daten an die Attribute des Elements binden

 <div id="app">

    <p v-bind:title="message" v-bind:id="pId">Ich bin ein p-Tag</p>

 </div>

<script src="./js/vue.js"></script>

          <Skript>

            lass vm = neues Vue({

                el:"#app",

                Daten:{

                    Nachricht: „Ich bin der Titelwert des p-Tags“,

                    pId: „Dies ist eine zufällige ID“

                }

            })

Die Ausgabe ist:

2. v-bind: kann abgekürzt werden als: Es wird empfohlen, den Doppelpunkt direkt zu schreiben

<div id="app">

    <p :title="message" :id="pId">Ich bin ein p-Tag</p>

 </div>

<script src="./js/vue.js"></script>

          <Skript>

            lass vm = neues Vue({

                el:"#app",

                Daten:{

                    Nachricht: „Ich bin der Titelwert des p-Tags“,

                    pId: „Dies ist eine zufällige ID“

                }

            })

Die Ausgabe ist die gleiche wie oben

3. v-bind: Zusammenfügen von Befehlsausdrücken,

Wenn Sie Ausdrücke verketten möchten, müssen die verketteten Zeichenfolgen in Anführungszeichen gesetzt werden, da sie andernfalls als Variablen analysiert werden.

Ohne Anführungszeichen:

Fehler : [Vue-Warnung]: Eigenschaft oder Methode „Dies ist eine zusätzliche ID“ ist in der Instanz nicht definiert, wird aber während des Renderns referenziert. Stellen Sie sicher, dass diese Eigenschaft reaktiv ist, entweder in der Datenoption oder für klassenbasierte Komponenten, indem Sie die Eigenschaft initialisieren.

Zitate hinzufügen:

<p title="200" :title="message" :id="pId+'Dies ist die zusätzliche ID'">Ich bin das p-Tag</p>

Ausgabe:

Dies ist das Ende dieses Artikels über die Verwendung von v-bind und die Punkte, auf die Sie achten sollten. Weitere Informationen zur Verwendung und zu den Punkten, auf die Sie bei v-bind achten sollten, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!