<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <ol> <li v-for="item in fruit">{{item}}</li> <li v-for="(item,index) in myClass">{{item.ename}}=={{index}}=={{item.cname}}</li> </ol> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> new Vue({ el: ‘#app‘, data: { fruit:[‘apple‘,‘banana‘,‘orange‘], myClass:[{ename:‘apple‘,cname:‘苹果‘},{ename:‘banana‘,cname:‘香蕉‘},{ename:‘orange‘,cname:‘橘子‘},] } }) </script> </body> </html>
加上v-bind:key="index(或者id)"可以调高vue的性能
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <ol> <li v-for="(item,key,index) in obj">{{key}}=={{index}}=={{item}}</li> </ol> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> //在原生js中使用 var obj={ name:‘张三‘, age:18, gender:‘male‘ } for (var key in obj) { console.log(key,obj[key]); } new Vue({ el: ‘#app‘, data: { obj } }) </script> </body> </html>