1. v-for

1. 遍历数组

//item=>值，index=>索引
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

//结果
0-Foo
1-Bar

1. 遍历对象

   //完整模式，value=>值，key=>键名，index=>索引
   <div v-for="(value, key, index) in object">
     {{ index }}. {{ key }}: {{ value }}
   </div>

   new Vue({
     el: '#v-for-object',
     data: {
   object: {
     firstName: 'John',
     lastName: 'Doe',
     age: 30
   }
     }
   })

   //结果
   0.firstName:John
   1.lastName:Doe
   2.age:30

2. key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略.

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

2. 数组更新检测

1. 变异方法：使用这些方法会改变原始数组，并且会触发视图更新

• push()
• pop()
• shift()
• unshift()
• sort()
• reverse()
• splice()
  ```
  //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

arrayObject.splice(index,howmany,item1,.....,itemX)

//index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
//item1, ..., itemX 可选。向数组添加的新项目。

//例子

2. 非变异方法：不会改变原始数组，会返回一个新的数组。例如

- filter()
- concat()

//简单理解为合并数组
var arr = [大漠,‘30‘,‘W3cplus‘];
console.log(arr); // ["大漠", "30", "W3cplus"]
var arr2 = arr.concat(‘Blog‘,‘2014‘);
console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]

//同时传递一个或多个数组
var arr = ["大漠","30"];
console.log(arr); // ["大漠", "30"]
var arr2 = arr.concat(1,["blog","w3cplus"],["a","b","c"]);
console.log(arr2); // ["大漠", "30", 1, "blog", "w3cplus", "a", "b", "c"]

//还可以传递空值，只是复制数组并返回一个副本
var arr = [1,2];
console.log(arr); // [1, 2]
var arr2 = arr.concat();
console.log(arr2); // [1, 2]

- slice()

//slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)

//start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
//end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

使用非变异方法，使用生成的新数组替换原数组不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表，因为vue使用了一些智能启发式的方法。

3. 注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

- 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

解决方法

// 方法1 Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// 方法2 Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

- 当你修改数组的长度时，例如：vm.items.length = newLength

解决方法

example1.items.splice(newLength)

4. 还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({
data: {
a: 1
}
})
// vm.a 现在是响应式的

vm.b = 2
// vm.b 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({
data: {
userProfile: {
name: ‘Anika‘
}
}
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

    Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

    vm.$set(this.userProfile, 'age', 27)
    
如果想复制多个属性

this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: ‘Vue Green‘
})

//Object.assign方法的第一个参数 (这里是‘{}‘) 是目标对象，后面的参数都是源对象。

5. 显示过滤/排序结果
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
例如：

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

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

data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}

6. v-for

//用在template上

//用在组件上

7. v-for with v-if

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

上面的代码只传递了未 complete 的 todos。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：

• {{ todo }}

No todos left!

```