用法：
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

拼接字符串innerHTML
vue提供了一个指令 v-for 解决循环问题 更高效 会复用原有的结构

<div id="app">
<!--要循环谁就在谁的身上增加v-for属性-->
    <!--默认是value of 数组 / (value,index) of 数组-->
    <ul>
        <li v-for="(fruit,index) in fruits">{{fruit.name}}.{{index+1}}
            <ul>
                <li v-for="(c,childIndex) in fruit.color">{{index+1}}.{{childIndex+1}}{{c}}</li>
            </ul>
        </li>
    </ul>
    <div v-for="c in 'aaa'">{{c}}</div>
    <div v-for="c in 5">{{c}}</div>
    <div v-for="(value,key,index) in obj">{{key}}:{{value}}:{{index}}</div>
</div>

<script>
    let vm=new Vue ({
        el:"#app",
        data:{
            obj:{name:"hh",age:9,address:"xxx"},
            fruits:[
                {name:"葡萄",color:["green","yellow"]},
                {name:"苹果",color:["red","green","yellow"]},
                {name:"火龙果",color:["pink"]}]
        }
    })
</script>

使用 v-for 遍历数组生成元素

我们可以使用 v-for 指令，将一个数组渲染为列表项。v-for 指令需要限定格式为 item in items 的特殊语法，其中，items 是原始数据数组(source data array)，而 item 是数组中每个迭代元素的指代别名(alias)：

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
结果：
Foo
Bar

在 v-for 代码块中，我们可以完全地访问父级作用域下的属性。v-for 还支持可选的第二个参数，作为当前项的索引。

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
结果：
Parent - 0 - Foo
Parent - 1 - Bar
你还可以不使用 in，而是使用 of 作为分隔符，因为它更加接近 JavaScript 迭代器语法：
`<div v-for="item of items"></div>`
使用 v-for 遍历对象

也可以使用 v-for 来遍历对象的属性。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
结果：
John
Doe
30
还可以提供第二个参数，作为对象的键名(key)：
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>
firstName: John
lastName: Doe
age: 30
然后第三个参数作为索引(index)：
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>
0. firstName: John
1. lastName: Doe
2. age: 30

在遍历一个对象时，是按照 Object.keys() 得出 key 的枚举顺序来遍历，无法保证在所有 JavaScript 引擎实现中完全一致。

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中v-for方法的详解