【实现嵌套渲染】

掉发小白

于 2022-10-01 20:18:34 发布

阅读量389

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46019475/article/details/127137015

版权

1.代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>嵌套渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for = "item in list":key="item.id">
          {{item.name}}
          <ol>
            <li v-for="m in item.music":key="m.musicid">
              {{m.musicName}}
            </li>
          </ol>
        </li>

      </ul>
    </div>
    <script>
      
      new Vue({
        el:'#app',
        data:{
          list:[{
id:1,
name :'周杰伦',
music:[{
  musicid:1,
  musicName:'龙卷风'
},
{
  musicid:2,
  musicName:'双截棍',
}]
},
{
  id:2,
  name:'林俊杰',
  music:[{
    musicid:1,
    musicName:'江南',
  },
{
  musicid:2,
  musicName:'可惜没如果',
}]
}]
        }
})

       
    </script>
  </body>
</html>

2.结果展示
在这里插入图片描述