Erläuterung des Vue.js-Renderings und des Schleifenwissens

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-Elementtextwert

HTML-Code:

JavaScript-Code:

<p id="app">
 {{ message }}
</p>

Laufergebnis: Hallo Vue!

var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

Zusammenfassung:

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 binden

Verwenden Sie die v-bind-Direktive, um das Titelattribut des Span-Elements zu binden

HTML-Code:

JavaScript-Code:

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>

Laufergebnisse:

var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date()
 }
})

Zusammenfassung:

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.

Bedingungen

Verwenden Sie die V-IF-Anweisung, um Bedingungen zu bestimmen

HTML-Code:

JavaScript-Code:

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>

Laufergebnisse: Sie können mich sehen

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

Zusammenfassung:

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:

JavaScript-Code:

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
 </ol>
</p>

Ausführungsergebnisse: 1. JavaScript lernen

var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
 { text: '学习 JavaScript' },
 { text: '学习 Vue' },
 { text: '创建激动人心的代码' }
 ]
 }
})

2. Vue lernen

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!