vue列表渲染

<!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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
posted @ 2018-11-06 08:00  明烟雨任  阅读(169)  评论(0编辑  收藏  举报