前言

最近在学Vue，其实这v-for学过去有一周了，今天看了一圈笔记感觉都是很细碎的知识点实在是没什么好写的，就这v-for记得多，就捋了捋腾上来了。

---

文章目录

前言甚麽是v-for指令一、v-for利用数组生成元素利用v-for从数组获取数据二、v-for利用对象生成元素利用v-for从对象中获取数据总结

---

甚麽是v-for指令

v-for指令使得页面可以依据data中数据的量完成页面元素的自动生成，节省工作量。

---

与for循环的功能相似，以第一个元素作为模板生成后续，内部的子元素也会被生成。

一、v-for利用数组生成元素

利用v-for从数组获取数据

基本的模式：

仅获取未做处理的数组元素：

<li v-for="用以获取数组元素的自定义变量 in 数组名">{{用以获取数组元素的自定义变量}}</li>

获取未处理的数组元素&各自的索引号：

<li v-for="(用以获取数组元素的自定义变量，用来获取索引号的变量) in 数组名">{{用以获取数组元素的自定义变量}}{{用来获取索引号的变量}}</li>

先写个例子吧：

<!--纯数组arr、内部有对象的数组objArr-->const app = new Vue({el: 'ul',data: {arr: [1, 2, 3, 4, 5],objArr: [{id: 1,name: 'a1',hobby: 'a2',},{id: 2,name: 'b1',hobby: 'b2',},'meaasge1']}})

一、直接获取数组内的元素

这意味着数组内的对象会直接被整个提取出来：

<ul><li v-for="item in objArr">{{i}}</li></ul>

<ul><li v-for="i in objArr">{{i}}</li></ul>

"in"前面的变量相当于for循环中的i，是可以自定义的，以上两段代码输出结果同为：

二、获取数组内对象的属性值

可以看到在上面的i里我们已经获取到了数组objArr里的所有元素，那么只需要在插值表达式上做些改动即可：

<ul><li v-for="i in objArr">{{i.name}}</li>//获取所有对象里的name属性;</ul>

三、获取数组元素的索引号

Vue对象里的数组内本身具有索引号，但是要绑定到一个变量才能获取出来，每个数组元素都要绑定一个这个变量里的索引号，然后在获取这个数组元素的时候把与它绑定的索引号获取出来：

绑定变量index到各个数组元素：

<ul><li v-for="(i,ind) in objArr">{{ind}}</li></ul>

<ul><li v-for="(i,index) in objArr">{{index}}</li></ul>

两个变量ind、index获取到的索引号是相同的：

二、v-for利用对象生成元素

利用v-for从对象中获取数据

基本的模式与从数组中获取很相似：

仅获取属性值：

<li v-for="用以获取属性值的自定义变量 in 对象名">{{用以获取属性值的自定义变量}}</li>

获取属性值&属性名：

<li v-for="(用以获取属性值的自定义变量,用以获取属性名的自定义变量) in 对象名">{{用以获取属性值的自定义变量}}{{用以获取属性名的自定义变量}}</li>

拿这个Vue对象作为例子吧：

const app = new Vue({el: 'ul',data: {obj1: {id: 1,name: 'a1',hobby: 'a2',},obj2: {id: 2,name: 'b1',hobby: 'b2',},}})

一、仅获取对象中属性的值

值通常比属性重要，所以第一个变量默认获取的是值。

完成利用v-for对对象值的获取，意味着您可以在这个元素的插值表达式里使用这些对象值对应的变量，以此来把这些值填充进生成的元素里。

<ul><li v-for="value in obj1">{{value}}</li>//“value”所在的位置是一个可自定义变量名的变量。</ul>

输出结果如下，为对象obj1里的三个属性值：

二、获取对象中的属性值和属性名

利用v-for获取对象中的属性名和属性值。

这意味着您可以在这个元素的插值表达式内使用您获取到的属性名和属性值。

<ul><li v-for="(value,key) in obj1">{{value}} & {{key}}</li></ul>

此处value作为要用来获取对象属性值的变量；

key作为用来获取属性名的变量；

输出结果如下：

---

## 三.一些注意事项 添加了v-for的元素，标签内插值表达式里的数据必须是已经在该标签的v-for里获取到的数据，否则会导致报错：

<ul><li v-for="i in objArr">{{index}}</li></ul>

const app = new Vue({el: 'ul',data: {arr: [1, 2, 3, 4, 5],objArr: [{id: 1,name: 'a1',hobby: 'a2',},{id: 2,name: 'b1',hobby: 'b2',},{id: 3,name: 'c1',hobby: 'c2',}]}})

您可以看到我们先是在v-for里利用i获取到了数组objArr里的各项对象形式的数据，但是在后面的插值表达式里我们用了"index"这个v-for没有获取到的数据所以：

总结

以上是我记下的关于v-for的一些知识点，感觉都是一些比较基础的知识。

您要是觉得还不错，就顺手给点个赞吧 : ·）