关于 v-for 如图

v-for不仅循环了li 也循环了外面的内容为什么呢？

源自：项目：Vue搭建课程首页 3-4 课程列表组件实现

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-12-07 10:06:26

同学你好，因为你在父组件中使用了两次子组件，第一个子组件传递了数据, 同时显示列表和div以及，第二个子组件没有传递数据，不会渲染列表，只显示了div和p内容，导致同学误以为v-for把外面的内容也循环了。

建议：去掉第二个v-test组件即可

效果图：

如果帮助到了你，欢迎采纳，祝学习愉快~

好帮手慕慕子 2019-12-06 19:12:35

同学你好，建议：直接将你写的代码粘贴过来（不要截图），便于帮助同学准确的定位与解决问题。祝学习愉快~

提问者慕神9465694 #1

<template> <div> <ul> <li v-for="(item,index) in details" :key="index"> <h1>{{item.name}}</h1> <p>{{item.age}}</p> <p>{{item.height}}</p> </li> </ul> <div>123</div> <p>abc</p> </div> </template> <script> export default { data(){ return{ } }, props:{ details:Array } } </script> <style scoped> li{ font-size: 20px; } </style> <template> <div> <v-test :details="arr"></v-test> <v-test></v-test> </div> </template> <script> import test from '@/components/test.vue' export default { data(){ return{ arr: [ { name:'xiaohua', age:16, height:'160cm' }, { name:'xiaoming', age:20, height:'165cm' }, { name:'xiaoai', age:20, height:'180cm' } ] } }, components:{ 'v-test':test } } </script>

2019-12-06 19:19:41