<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>基本列表</title><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- v-for指令：1.用于展示列表数据2.语法：v-for="(item,index) in arr" :key="item.id"3.可遍历：数组、对象、字符串--><!-- 准备一个容器 --><divid="root"><ul><!-- 使用v-for遍历数组 --><liv-for="(item,index) in persons":key="item.id">{{item.id}}-----{{item.name}}------{{item.age}}岁-----{{item.sex}}</li></ul><div>汽车信息</div><ul><!-- 使用v-for遍历对象 --><liv-for="(value,key) in car":key="key">{{value}}</li></ul><h2>测试遍历字符串</h2><ul><liv-for="(data,index) in str">{{data}}---{{index}}</li></ul></div><script>newVue({el:"#root",data:{persons:[{id:"001",name:"老张",age:20,sex:"男"},{id:"002",name:"老刘",age:29,sex:"女"},{id:"003",name:"老马",age:32,sex:"男"},{id:"004",name:"老王",age:50,sex:"女"},],car:{name:"奔驰G63",price:"60万",color:"灰色",},str:"abcdef",},});</script></body></html>
