Vue.js 循环语句 -向日葵屋

## Vue.js 循环语句

#### v-for 指令

`v-for` 指令可以绑定数组的数据来渲染一个项目列表：

```vue
<template>
    <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</template>
<script>
    export default {
        name: 'MyTemplate',
        data() {
            return {
                sites: [
                    {name: 'Ddandelioncloud'},
                    {name: 'Google'},
                    {name: 'Taobao'}
                ]
            }
        }
    }
</script>
```

**v-for 迭代对象**

```vue
<template>
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</template>
<script>
    export default {
        name: 'MyTemplate',
        data() {
            return {
                object: {
                   name: '蒲公英云',
                   url: 'http://www.dandelioncloud.cn',
                   slogan: '学的不仅是技术，更是梦想！'
                }
            }
        }
    }
</script>
```

或者

```vue
<ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
</ul>
```

key为键名 index 为索引

**同时v-for还支持迭代整数**

```vue
<ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
</ul>
```