So implementieren Sie die Datenbindung und das Spleißen von Vue-Tag-Attributen

Dieses Mal zeige ich Ihnen, wie Sie die Datenbindung und das Spleißen von Vue-Tag--Attributen implementieren, und Vorsichtsmaßnahmen zum Implementieren von Datenbindung und -spleißen von Vue-Tag-Attributen. Was Sind sie das? Hier sind tatsächliche Fälle.

Nachdem ich die Dokumente auf der offiziellen Vue-Website gescannt hatte, begann ich mit dem Schreiben des Website-Projekts. Es gab kein Design, also habe ich auf Baidu eine h5-Gewinner-Software-Website gefunden und sie kopiert, als ich dachte darüber. Dann ändern Sie den Inhalt.

Beginnen Sie zunächst mit der Anzeige einer Liste

Nachdem die Vue-Instanz bereit ist, fügen Sie dem Objekt Standarddaten hinzu und die Liste wird erfolgreich geladen. Schauen Sie sich den Quellcode an, um zu sehen, ob er Ihren Vorstellungen entspricht. Derzeit wird nur das initialisierte Standardarray angezeigt. Versuchen Sie, das ID-Feld und die Nummer zum initialisierten Array hinzuzufügen. Es hat keine Auswirkung Eine Abzocke von Chrome ist besonders schwerwiegend und ich muss den Cache leeren oder eine Aktualisierung erzwingen. Vue hat in der Konsole einen Fehler gemacht und gesagt, dass die {{id}} Grammatikfehler

und es gab kein ähnliches Beispiel. Ich begann aufgrund meiner eigenen Erfahrung, es umzuschreiben. Es schien, dass das Dokument nicht sorgfältig genug gelesen wurde, es ist notwendig, es gezielt zu bearbeiten. Ich habe gesehen, dass die Klasse und der Stil des Tags gebunden sind, und ich habe gesehen, dass es eine Objektsyntax und eine Array-Syntax gibt. Ohne weitere Umschweife habe ich zuerst die Objektschreibmethode in das Tag geschrieben, aktualisiert, um den Effekt zu sehen, und das festgestellt Der href des a-Tags war wie detail/[

object object], ich habe gelacht.
Es scheint, dass ich es immer noch falsch verwendet habe. Nachdem ich die Beschreibung der Array-Syntax gelesen habe, habe ich direkt Artikel 1 Jetzt funktioniert es Warum heißt es Array-Syntax? Warum kann dieser Ort nur so geschrieben werden? Es fühlt sich immer falsch an. Finden Sie eine ähnliche

Sicherheit

und sehen Sie, wie andere es geschrieben haben.

Fangen wir an mit etwas Code.

<tr v-for="item in Strategys" class="ng-scope">
 <td>
　　<a class="ng-binding ng-scope" v-bind:href="[&#39;xxx/detail/&#39;+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a>
 </td>

Datenblockcode

var vm = new Vue({
　　el: '#section-strategies',
　　data: {
　　　　　　parentMessage: 'Parent',
　　　　　　StrategyCnt:0,
　　　　　　Strategys: [{id:1,name:'文章1'}，{id:2,name:'文章2'}]
　　}
 })

Dann besteht der ultimative Trick darin, Ajax zum Anfordern von Serverdaten zu verwenden. Es ist unmöglich, immer Initialisierungs- und Standarddaten zu verwenden Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So ändern Sie die Create-React-App, um Mehrseiten zu unterstützen

ohne Select How zu verwenden um die Dropdown-Box-Funktion in Vue zu implementieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Datenbindung und das Spleißen von Vue-Tag-Attributen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!