划重点
- v-for:遍历
牛肚一份带走不谢：
<!DOCTYPEhtml><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><title>v-for指令的使用</title><script src="./lib/vue-2.6.10.js"></script></head><body><!--v-for直接修饰的是 对象 属性--><div id="app"><!--item 表示对应的 数组中的 （item） 单个的元素；in：表示是包含在哪个数组中；listShuZu:表示的是一个数组 那么 v-for="item in listShuZu"就可以理解为：通过for循环 把 数组listShuZu 中的每一个 item 元素对应的取出来 扩展：这里只是 取的每一个元素；没有取下标的参数；下一个案例数组listObj对象可以取下标 或者item中的name/id 等信息。--><h3>"v-for 遍历数组"</h3><br><p v-for="item in listShuZu">{{item}}</p><br><!--listObj是 对象的数组；这里的案例；里面有两个参数：item 和 index item:表示数组中的 每一个子元素 如：第一个子元素是：{id:1,name:'zs1'}index： 表示的是：item 对应的索引下标 ；如第一个元素的索引下标就是：0这样可以通过：item.id 获取到元素对应的id;可以通过 item.name 获取到元素对应的名称 ； 注意：上面的 item 是定义的变量名称；可以直接用插值表达式使用：{{item}};因为在JS中定义变量和 Java 中不是很一样；在Java 中必须定义了一个变量才能使用；但是在JS中有的时候可以直接使用变量：我们姑且认为这个变量默认是已经被定义的--><h3>"v-for 遍历对象数组数组"</h3><br><p v-for="(item , index ) in listObj":key="item">===元素：{{item}}元素的名字：{{item.name}}索引下标：{{index}}</p><br><br><!--v-for直接遍历了数字数组 i：表示：数组的子元素 index：标示了索引的 下标--><h3>"v-for 直接迭代 数字数组"</h3><br><p v-for="(i,index) in 5">===元素：{{i}}索引下标：{{index}}</p><!--针对上面的 对 v-for的使用 总结几点：1:如果 只有一个参数：那么获取的遍历结果就是该数组的子元素 如：v-for="item in list "2:如果 有两个参数：那么一般第一个参数是 子元素；第二个参数是 索引下标;;这个时候 是多个参数的需要用 小括号（） 括起来。 如：v-for=“(item,index)inlist”--></div><script>varvm=newVue({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>
