vue列表渲染

萝らか妹 提交于 2020-01-23 02:16:56
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <div id="app" class="container"> <template v-if="true"> <h1 class="page-header">title</h1> <ul class="list-group"> <li class="list-group-item" v-for="(item,index) in items"> {{title}}{{index+1}} <span class="pull-right">{{item.username}}</span> </li> </ul> </template> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ el:'#app', data:{ title:'user', items:[ {id:1, username:'alice'}, {id:2, username:'ben'}, {id:3, username:'carl'}, ] } }); </script> </body> </html>


作者:JunChow520
链接:https://www.jianshu.com/p/bfceb06edd6b
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!