16.VUE學習之- v-for指令的使用方法
阿新 • • 發佈:2019-01-07
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="hdcms"> <table border="1"> <tr> <th>序號</th> <th>編號</th> <th>標題</th> <th>老師</th> </tr> <tbody> <!--可以用for in news 也可以用for of news--> <!--key是當前迴圈的每幾條,是從0開始的--> <tr v-for="(field,key) of news"> <td>{{key+1}}</td> <td>{{field.id}}</td> <td>{{field.title}}</td> <td>{{name}}</td> <!--每次都取name值,不變--> </tr> </tbody> </table> </div> <script> var app = new Vue({ el: '#hdcms', data: { name:'向軍老師', news:[ {id:22,title:'houdunren.com'}, {id:77,title:'後盾人'} ] } }); </script> </body> </html>
效果: