!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title基本列表/title script typetext/javascript src../../js/vue.js/script /head body !-- 准备好一个容器, -- div idroot h2人员列表/h2 ul !-- 遍历数组 -- !-- 每个li都有了一个标识。使用遍历生成结构结构都必须有标识。给li个标识 -- !-- 代表动态绑定 -- li v-forp in persons :keyp.id{{p.name}}-{{p.age}}/li !-- 遍历对象 -- !-- 第二种写法,这里允许有两个参数 -- !-- in of都是可以的 -- li v-forp,index of persons :keyindex 测试文字--{{index}} /li /ul h2汽车信息/h2 ul li v-fora,b in car{{a}}-{{b}}/li /ul /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { persons: [ { id: 001, name: 张三, age: 13 }, { id: 002, name: 李四, age: 18 }, { id: 003, name: 王五, age: 20 } ], car: { name: 奥迪A8, age: 13, price: 10000 } } }) /script /body /html