vue 如何v-for 套 v-for

我想通过<li v-for="value in Configuration"> 确定渲染多少个li
然后li中的img元素怎么渲染?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="example1">
       <ul>
           <li v-for="value in Configuration">
                <img v-bind:src = 这里如何写>
           </li>
       </ul>
    </div>

    <script src="vue.js"></script>
    <script>
        const demo1 = new Vue({
            el:'#example1',
            data:{
                Configuration:{
                    pen1:{
                        img_lists:['http://p1.music.126.net/56LFBktGGNxAByH1JufjDw==/18994063370232622.jpg?param=140y140', 'http://p1.music.126.net/gvCRA0N-dnXz2GTl1OIhoA==/3354609977007324.jpg?param=140y140']
                    },
                    pen2:{
                        img_lists:['http://p1.music.126.net/56LFBktGGNxAByH1JufjDw==/18994063370232622.jpg?param=140y140', 'http://p1.music.126.net/gvCRA0N-dnXz2GTl1OIhoA==/3354609977007324.jpg?param=140y140']
                    }
                }
            }
        })
    </script>
</body>
</html>

补充首先谢谢陌路凡歌,但是还有个问题
数据每个img_lists均有两张图片

clipboard.png

但是浏览器中看到每个li只渲染一张图,而且是同一张图
clipboard.png
![图片上传中...]

阅读 3.8k
2 个回答
<img v-bind:src = "src" v-for="src in value.img_lists">
<ul>
  <li v-for="(pen, index) in Configuration">
    <img v-for="(src, index) in pen.img_lists" :src="src"/>
  </li>
</ul>

两个for的子项别重名就行了。

图片描述

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题