---

theme: smartblue

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

循环语句

v-for指令

v-for循环语句是很常用的语法，可以用于渲染数组、结构体中的数据到一个列表、页面中。但是v-for指令需要使用"site in sites"型的特殊语法，其中sites指的是源数据数组，site是数组元素迭代的别名。 - 代码示例： ```html

``` 效果：

索引值参数

v-for指令还支持一个可选的第二个参数，参数值为当前项的索引(数组下标)： - 代码示例： ```html

``` 效果：

template

v-for指令也可以像条件语句一样使用template模板，。 - 代码示例： html <template v-for="site in sites"> <li>{{ site.text }}</li> <li>《++++++++++++》</li> </template> 只需将以上代码替换掉ul标签中的代码即可。

迭代对象

v-for指令可以通过对象的属性来迭代数据渲染到页面中。 ```html

```

提供键名和索引

因为对象的数据是键值对的形式，所以我们可以添加键名作为参数和循环出键名和对象数据. - 代码示例： ```html

• {{ key }} : {{ value }}

v-for指令还可以添加第三个参所作为索引。 - 代码示例： html

• {{ index }}. {{ key }} : {{ value }}

```

整数

v-for循环可以直接迭代整数。 ```html

• // 从1循环到1000
• {{ n }}

```

循环数据处理过后的结果

我们可以对数组、对象数据处理之后再进行渲染出来。 - 代码示例

```html

```