Explication du rendu Vue.js et des connaissances en boucle

Cet article présente principalement les connaissances de base du rendu déclaratif vue.js, des conditions et des boucles en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

vue.js Le contenu spécifique du rendu déclaratif, les conditions et les boucles sont partagées avec tout le monde

Valeur du texte de l'élément DOM de liaison

code html :

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

Code JavaScript :

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

Résultat de l'exécution : Bonjour Vue !

Résumé : Les données et le DOM ont été liés ensemble . Lorsque nous modifions les données de app.message, les éléments DOM rendus seront mis à jour en conséquence.

Lier les attributs de l'élément DOM

Utilisez la directive v-bind pour lier l'attribut titre de l'élément span

code html :

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

Code JavaScript :

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

Résumé :

Résumé : L'attribut v-bind est appelé une instruction et est un attribut spécial fourni par Vue. La fonction de cette instruction est : "Conserver l'attribut title de cet élément associé à l'attribut message de l'instance Vue et le mettre à jour." Lorsque nous modifions la valeur de app2.message, l'élément lié à l'attribut title sera mis à jour.

Conditions

Utilisez l'instruction v-if pour déterminer les conditions

Code HTML :

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

Code JavaScript :

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

Résultats en cours d'exécution : Vous pouvez me voir

Résumé : Quand on met app3 Après avoir changé la valeur de .seen en false, nous verrons le span disparaître. Cela montre que nous pouvons non seulement lier des données au texte et aux attributs, mais également lier des données aux structures DOM. Cela permet les opérations d'insertion/mise à jour/suppression d'éléments via des modifications de données.

Boucle

v-pour instruction, vous pouvez utiliser les données du tableau pour afficher une liste d'éléments

code html :

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

Code JavaScript :

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

Résultats d'exécution : 1. Apprendre JavaScript
2. Apprendre Vue
3. Créer Code passionnant

Dans la console, entrez app4.todos.push({ text: 'new item' }), et vous verrez un nouvel élément ajouté à la liste.
Résumé : La longueur et le contenu de notre liste d'articles peuvent être déterminés grâce aux données, réduisant ainsi la quantité de code html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!