#### v-for指令的使用方法 <div id="hdcms"> <table border="1"> <tr> <th>序號</th> <th>編號</th> <th>標題</th> <th>老師</th> </tr> <tbody> <tr v-for="(field,key) of news"> <td>{{key+1}}</td> <td>{{field.id}}</td> <td>{{field.title}}</td> <td>{{name}}</td> </tr> </tbody> </table> </div> <script> var app = new Vue({ el: '#hdcms', data: { name:'向軍老師', news:[ {id:22,title:'houdunren.com'}, {id:77,title:'后盾人'} ] } }); </script> #### v-for操作對象與數值 <div id="hdcms"> <li v-for="(item,key,index) in user"> {{index}} - {{key}} - {{item}} </li> <table border="1" width="100%"> <tr v-for="v in 20"> <td>{{v}}</td> </tr> </table> </div> <script> var app = new Vue({ el: '#hdcms', data: { user: { name: '向軍', age: '22', sex: 'boy' } } }); </script> #### v-for與computed結合功能實例講解 <div id="hdcms"> <li v-for="v in stus"> {{v.name}} - {{v.sex}} </li> {{type}} <input type="radio" v-model="type" value="girl"> 女孩 <input type="radio" v-model="type" value="boy"> 男孩 </div> <script> var app = new Vue({ el: '#hdcms', computed:{ stus(){ if(this.type=='all'){ return this.user; }else{ return this.user.filter((v)=>{ return v.sex ==this.type; }); } } }, data: { type:'all', user:[ {name:'小明',sex:'boy'}, {name:'小強',sex:'boy'}, {name:'小麗',sex:'girl'}, {name:'小梅',sex:'girl'} ] } }); </script>