Maison > Article > interface Web > Code d'implémentation du nœud de boucle v-for dans Vue
Code d'implémentation du nœud de boucle v-for dans Vue
- 不言original
- 2018-08-14 11:55:131881parcourir
Le contenu de cet article concerne le code d'implémentation du nœud de boucle v-for dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="rrn">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>父循环第一次</th>
<th>子循环第一次</th>
<th>json数据的第几条</th>
<th>数值</th>
</tr>
<tbody v-for="dp,index in parentList" >
<tr v-for="bp,indo in dp.childList">
<td>{{index}}</td>
<td>{{indo}}</td>
<td>{{bp.index}}</td>
<td>{{bp.childName}}</td>
</tr>
</tbody>
</table>
</p>
</body>
<script src="vue.js"></script>
<script>
let er=new Vue({
el:"#rrn",
data:{
parentList: [
{
childList: [{
index: 1,
childName: "第一个节点"
}, {
index: 2,
childName: "第一个节点"
}, {
index: 3,
childName: "第一个节点"
}, {
index: 4,
childName: "第一个节点"
}, {
index: 5,
childName: "第一个节点"
}]
},
{
childList: [{
index: 6,
childName: "第二个节点"
}, {
index: 7,
childName: "第二个节点"
}, {
index: 8,
childName: "第二个节点"
}, {
index: 9,
childName: "第二个节点"
}, {
index: 10,
childName: "第二个节点"
}]
},
{
childList: [{
index: 11,
childName: "第三个节点"
}, {
index: 12,
childName: "第三个节点"
}, {
index: 13,
childName: "第三个节点"
}, {
index: 14,
childName: "第三个节点"
}, {
index: 15,
childName: "第三个节点"
}]
}]
}
})
</script>
</html>
Recommandations associées :
Introduction aux méthodes d'optimisation de la taille des fichiers dans les projets Vue
v-if et v-in vue Quelle est la différence ? Résumé des différences entre v-if et v-show
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn