Vue.js
Datenbindung

Text

Die grundlegendste Form der Datenbindung ist die Textinterpolation mit der "Moustache" -Syntax (doppelte geschweifte Klammern):

<span>Message: {{ msg }}</span>

Das Mustache-Tag wird durch den Wert der Eigenschaft msg des entsprechenden Datenobjekts ersetzt. Sie wird auch aktualisiert, wenn sich die msg -Eigenschaft des Datenobjekts ändert.

Sie können auch einmalige Interpolationen durchführen, die sich bei Datenänderungen nicht aktualisieren:

<span>This will never change: {{* msg }}</span>

Rohes HTML

Der doppelte Schnurrbart interpretiert die Daten als Text, nicht als HTML. Um echtes HTML auszugeben, müssen Sie dreifache Schnurrbärte verwenden:

<div>{{{ raw_html }}}</div>

Der Inhalt wird als einfaches HTML eingefügt - Datenbindungen werden ignoriert. Wenn Sie Schablonenstücke wiederverwenden müssen, sollten Sie Partials verwenden.

Attribute

Schnurrbärte können auch in HTML-Attributen verwendet werden:

<div id="item-{{ id }}"></div>

Beachten Sie, dass Attributinterpolationen in Vue.js-Anweisungen und speziellen Attributen nicht zulässig sind. Keine Sorge, Vue.js wird Warnungen auslösen, wenn Schnurrbärte an falschen Stellen verwendet werden.

Filter

Mit Vue.js können Sie optionale "Filter" an das Ende eines Ausdrucks anhängen, der mit dem "Pipe" -Symbol gekennzeichnet ist:

{{ message | capitalize }}

Hier "leiten" wir den Wert des message durch den eingebauten capitalize , der eigentlich nur eine JavaScript-Funktion ist, die den kapitalisierten Wert zurückgibt. Vue.js bietet eine Reihe von integrierten Filtern. Wir werden später darüber sprechen, wie Sie Ihre eigenen Filter schreiben.

Beachten Sie, dass die Pipe-Syntax nicht Teil der JavaScript-Syntax ist. Daher können Sie keine Filter in Ausdrücken mischen. Sie können sie nur am Ende eines Ausdrucks anhängen.

Filter können verkettet werden:

{{ message | filterA | filterB }}

Filter können auch Argumente annehmen:

{{ message | filterA 'arg1' arg2 }}

Die Filterfunktion erhält immer den Wert des Ausdrucks als erstes Argument. Zitierte Argumente werden als einfache Zeichenfolge interpretiert, während nicht zitierte Argumente als Ausdrücke ausgewertet werden. Hier wird der einfache String 'arg1' als zweites Argument an den Filter übergeben, und der Wert des Ausdrucks arg2 wird ausgewertet und als drittes Argument übergeben.