05v-for命令

2024-09-08 11:48

文章标签 命令 05v

本文主要是介绍05v-for命令，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

划重点

v-for:遍历

牛肚一份带走不谢：

<!DOCTYPE html>
<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 ) in list”
--></div><script>var vm = new Vue({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>