划重点v-for:遍历牛肚一份带走不谢!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatiblecontentieedgetitlev-for指令的使用/titlescript src./lib/vue-2.6.10.js/script/headbody!--v-for直接修饰的是 对象 属性--div idapp!--item 表示对应的 数组中的 item 单个的元素in表示是包含在哪个数组中listShuZu:表示的是一个数组 那么 v-foritem in listShuZu就可以理解为通过for循环 把 数组listShuZu 中的每一个 item 元素对应的取出来 扩展这里只是 取的每一个元素没有取下标的参数下一个案例数组listObj对象可以取下标 或者item中的name/id 等信息。--h3v-for 遍历数组/h3brp v-foritem in listShuZu{{item}}/pbr!--listObj是 对象的数组这里的案例里面有两个参数item 和 index item:表示数组中的 每一个子元素 如第一个子元素是{id:1,name:zs1}index 表示的是item 对应的索引下标 如第一个元素的索引下标就是0这样可以通过item.id 获取到元素对应的id;可以通过 item.name 获取到元素对应的名称 注意上面的 item 是定义的变量名称可以直接用插值表达式使用{{item}};因为在JS中定义变量和 Java 中不是很一样在Java 中必须定义了一个变量才能使用但是在JS中有的时候可以直接使用变量我们姑且认为这个变量默认是已经被定义的--h3v-for 遍历对象数组数组/h3brp v-for(item , index ) in listObj:keyitem元素{{item}}元素的名字{{item.name}}索引下标{{index}}/pbrbr!--v-for直接遍历了数字数组 i表示数组的子元素 index标示了索引的 下标--h3v-for 直接迭代 数字数组/h3brp v-for(i,index) in 5元素{{i}}索引下标{{index}}/p!--针对上面的 对 v-for的使用 总结几点1:如果 只有一个参数那么获取的遍历结果就是该数组的子元素 如v-foritem in list 2:如果 有两个参数那么一般第一个参数是 子元素第二个参数是 索引下标;;这个时候 是多个参数的需要用 小括号 括起来。 如v-for“(item,index)inlist”--/divscriptvarvmnewVue({el:#app,data:{listShuZu:[1,2,3,4,5,6],listObj:[{id:1,name:zs1},{id:1,name:zs1},{id:1,name:zs1}]},methods:{}})/script/body/html效果图