（列表渲染）循环结构

遍历数组

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

注意：当在组件上使用 v-for 时，key 现在是必须的。key的作用，帮助vue区分不同的元素，从而提高性能。

// tempalte模版

     
for="(item, index) in list" :key="item.message">
           {{ index }}：{{ item }}
     


// 业务逻辑
var vm = new Vue({
      el: '#app',
      data: {
           list: ['html', 'css', 'javascript', 'es6', 'ajax', 'vue']
      }
});
// 显示结果如下：

再来看一个稍复杂的例子

// template模版

     

           
for="item in items" :key="item.message">
                {{ item.message }}
           
     


// 业务逻辑
var vm = new Vue({
      el: '#app',
      data: {
           items: [{
                  message: 'Foo'
               },
               {
                  message: 'Bar'
                }
           ]
      }
});

// 显示结果如下：

在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

// template模版

     
for="(item, index) in items" :key="item.message">
            {{ parentMessage }}-{{ index }}-{{ item.message }}
      


// 业务逻辑
 data: {
    parentMessage: 'Parent',
    items: [{
               message: 'Foo'
          },
          {
               message: 'Bar'
          }
    ]
}

// 显示结果如下：

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

for="item of items">

遍历对象

你也可以用 v-for 来遍历一个对象的 property。

// template模版

      
for="value in object">
            {{ value }}
      
  

// 业务逻辑
var vm = new Vue({
     el: '#app',
     data: {
          object: {
               title: 'How to do lists in Vue',
               author: 'Jane Doe',
               publishedAt: '2016-04-10'
         }
     }
});  

// 显示结果如下：

你也可以提供第二个的参数为 property 名称 (也就是键名)：

for="(value, name) in object">
      {{ name }}: {{ value }}


// 显示结果如下：

还可以用第三个参数作为索引：

// template模版

     
for="(item,name, index) in object" :key="item.message">
           {{ index }} {{ name}}：{{ item }}
     


// 显示结果如下：

数组更新检测

#改变原数组

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变更方法。比如

vm.items.push({ message: 'Baz' });

显示结果如下：

#不改变原数组

它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

filter()
concat() 
slice()

显示过滤/排序后的结果

有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

例如：

// template模版
for="n in evenNumbers">{{ n }}

// 业务逻辑
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// 显示结果为：
// 2，4，6

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：

// template 模版
for="set in sets">
  
for="n in even(set)">{{ n }}


// 业务逻辑
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

// 2、4
// 6、8、10

在v-for里使用值范围

v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。

  for="n in 10">{{ n }} 


// 12345678910