Heim > Web-Frontend > js-Tutorial > Hauptteil

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

巴扎黑
Freigeben: 2017-08-07 17:00:10
Original
1605 Leute haben es durchsucht

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>
Nach dem Login kopieren


Laufergebnis: Hallo Vue!
var app = new Vue({
 el: &#39;#app&#39;,
 data: {
 message: &#39;Hello Vue!&#39;
 }
})
Nach dem Login kopieren

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>
Nach dem Login kopieren


Laufergebnisse:
var app2 = new Vue({
 el: &#39;#app-2&#39;,
 data: {
 message: &#39;页面加载于 &#39; + new Date()
 }
})
Nach dem Login kopieren

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>
Nach dem Login kopieren


Laufergebnisse: Sie können mich sehen
var app3 = new Vue({
 el: &#39;#app-3&#39;,
 data: {
 seen: true
 }
})
Nach dem Login kopieren

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>
Nach dem Login kopieren


Ausführungsergebnisse: 1. JavaScript lernen
var app4 = new Vue({
 el: &#39;#app-4&#39;,
 data: {
 todos: [
 { text: &#39;学习 JavaScript&#39; },
 { text: &#39;学习 Vue&#39; },
 { text: &#39;创建激动人心的代码&#39; }
 ]
 }
})
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage