In diesem Artikel werden hauptsächlich die Grundkenntnisse des deklarativen Renderings von vue.js sowie die Bedingungen und Schleifen vorgestellt. Interessierte Freunde können sich auf den spezifischen Inhalt von vue.js beziehen. Bedingungen und Schleifen werden mit allen geteilt
Bindender DOM-ElementtextwertHTML-Code:
<p id="app"> {{ message }} </p>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
Die Daten und das DOM wurden miteinander verknüpft . Wenn wir die Daten von app.message ändern, werden die gerenderten DOM-Elemente entsprechend aktualisiert.
DOM-Elementattribute bindenVerwenden Sie die v-bind-Direktive, um das Titelattribut des Span-Elements zu binden
HTML-Code:
<p id="app-2"> <span v-bind:title="message"> 鼠标悬停此处几秒, 可以看到此处动态绑定的 title! </span> </p>
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() } })
Das V-Bind-Attribut wird als Anweisung bezeichnet und ist ein spezielles Attribut, das von Vue bereitgestellt wird. Die Funktion dieser Anweisung ist: „Behalten Sie das Titelattribut dieses Elements bei, das mit dem Nachrichtenattribut der Vue-Instanz verknüpft ist, und aktualisieren Sie es.“ Wenn wir den Wert von app2.message ändern, wird das an das Titelattribut gebundene Element aktualisiert.
BedingungenVerwenden Sie die V-IF-Anweisung, um Bedingungen zu bestimmen
HTML-Code:
<p id="app-3"> <p v-if="seen">现在你可以看到我</p> </p>
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
Wenn wir app3 setzen Nachdem wir den Wert von .seen auf false geändert haben, wird span verschwinden. Es zeigt, dass wir nicht nur Daten an Text und Attribute binden können, sondern auch Daten an DOM-Strukturen. Dies ermöglicht Einfüge-/Aktualisierungs-/Löschvorgänge von Elementen durch Datenänderungen. Schleife
v-for-Anweisung, Sie können die Daten im Array verwenden, um eine Liste von Elementen anzuzeigen
HTML-Code:
<p id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </p>
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '创建激动人心的代码' } ] } })
3. Erstellen spannender Code
Geben Sie in der Konsole app4.todos.push({ text: 'new item' }) ein und Sie sehen, dass ein neues Element an die Liste angehängt wird.
Zusammenfassung:
Die Länge und der Inhalt unserer Artikelliste können anhand von Daten bestimmt werden, wodurch die Menge an HTML-Code reduziert wird
Das obige ist der detaillierte Inhalt vonErläuterung des Vue.js-Renderings und des Schleifenwissens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!