vue中 v-for
时间: 2023-11-05 12:57:27 浏览: 117
【JavaScript源代码】Vue中v-for更新检测的操作方法.docx
v-for是Vue.js中的一个指令,用于循环渲染列表或对象的属性。在Vue中,v-for的语法可以有不同的形式,根据循环的需求选择不同的形式。
1. 如果要循环渲染一个数组或对象的属性值,可以使用以下形式:
```html
<li v-for="o1 in obj">{{ o1 }}</li>
```
这种形式下,o1表示数组或对象的属性值。
2. 如果要同时获取数组或对象的属性值和属性名,可以使用以下形式:
```html
<li v-for="(o1, o2) in obj">{{ o1 }} >>> {{ o2 }}</li>
```
这种形式下,o1表示数组或对象的属性值,o2表示数组或对象的属性名。
3. 如果要同时获取数组或对象的属性值、属性名和下标,可以使用以下形式:
```html
<li v-for="(o1, o2, o3) in obj">{{ o1 }} >>> {{ o2 }} >>> {{ o3 }}</li>
```
这种形式下,o1表示数组或对象的属性值,o2表示数组或对象的属性名,o3表示数组或对象的下标。
另外,v-for还可以用于循环渲染数字,如以下形式:
```html
<p v-for="count in 10">这是第{{ count }}次循环</p>
```
在这种情况下,count表示当前循环次数,从1开始。
阅读全文