v-for 渲染列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style></style> <!-- v-for 用于列表展示数据 语法:v-for="(item,index) in xxx" :key='xxx' 可遍历:数组,对象,字符串,指定次数 --> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="root"> <h2>渲染列表数组</h2> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> <h2>渲染列表数组(另外一种写法) 使用in或者of都可以</h2> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}} </li> </ul> <h2>渲染列表对象</h2> <ul> <li v-for="(value,k) in personsObj" :key="k"> {{k}}-{{value}} </li> </ul> <h2>渲染列表字符串</h2> <ul> <li v-for="(a,b) in personsStr"> {{a}}-{{b}} </li> </ul> <h2>渲染列表字符串</h2> <ul> <li v-for="(a,b) in personsStr"> {{a}}-{{b}} </li> </ul> <h2>渲染列表数字</h2> <ul> <li v-for="(number,b) in 7"> {{number}}-{{b}} </li> </ul> </div> <script> Vue.config.productionTip = false; new Vue({ el : '#root', data:{ persons:[ {id:'001',name:'张一',age:'16'}, {id:'002',name:'张二',age:'17'}, {id:'003',name:'张三',age:'18'} ], personsObj:{ name:'张四', age:'19', sex:'男' }, personsStr:'hello' }, }) </script> </body> </html>