利用v-for指令，基于数据多次渲染元素。

在v-for中使用数组

用法：(item, index) in items
参数：items: 源数据数组
item：数组元素别名
index：可选，索引
可以访问所有父作用域的属性

  1. <ul id="app">
  2.   <li v-for="(person, index) in persons">
  3.     {{ index }}---{{ person.name }}---{{ person.age }}
  4.   </li>
  5. </ul>
  1. const vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     persons: [
  5.       { name: '杉杉', age: 18 },
  6.       { name: '思彤哥', age: 20 },
  7.       { name: '成哥', age: 22 },
  8.       { name: '邓哥', age: 88 },
  9.     ]
  10.   }
  11. })

可以利用of替代in作为分隔符，因为它更接近迭代器的语法：

  1. <div v-for="item of items"></div>

在v-for中使用对象

用法：(value, key, index) in Object
参数：value: 对象值
key：可选，键名
index：可选，索引

  1. <ul id="app">
  2.   <li v-for="(value, key, index) in shan">
  3.     {{ value }}
  4.   </li>
  5. </ul>
  1. const vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     shan: {
  5.       name: '杉',
  6.       age: 18,
  7.       height: '163cm'
  8.     }
  9.   }
  10. })

在v-for中使用数字

用法：n in num
参数：n: 数字，从1开始

  1. <div>
  2.   <span v-for="n in num">{{ n }} </span>
  3. </div>
  1. const vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     num: 10
  5.   }
  6. })

在v-for中使用字符串

用法：str in string
参数：str: 字符串，源数据字符串中的每一个

  1. <div>
  2.   <span v-for="str in string">{{ str }} </span>
  3. </div>
  1. const vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     string: 'shanshan'
  5.   }
  6. })

循环一段包含多个元素的内容

可以利用template元素循环渲染一段包含多个元素的内容

  1. <ul id="app">
  2.   <template v-for="person in persons">
  3.     <li>{{ item.msg }}</li>
  4.     <li>哈哈</li>
  5.   </template>
  6. </ul>
  1. const vm = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     persons: ['shan', 'jc', 'cst', 'deng']
  5.   }
  6. })