vue列表渲染
目录
1.1 遍历数组
//item=>值，index=>索引
<ul >
<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.2 遍历对象
//完整模式，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
1.3 key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略.
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
2. 数组更新检测
2.1 变异方法：使用这些方法会改变原始数组，并且会触发视图更新
- push()
- pop()
- shift()
- unshift()
- sort()
- reverse()
- splice()
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)
//index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
//item1, ..., itemX 可选。向数组添加的新项目。
//例子
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
//操作
//1.
arr.splice(2,0,"William")
//2.
arr.splice(2,1,"William")
//3.
arr.splice(2,3,"William")
//arr结果
//1. George,John,William,Thomas,James,Adrew,Martin //在index=2位置添加william
//2. George,John,William,James,Adrew,Martin //删除index=2的原有元素，添加新元素
//3. George,John,William,Martin //从index=2位置删除掉3个元素，再添加新元素
</script>
2.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使用了一些智能启发式的方法。
2.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)
2.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方法的第一个参数 (这里是'{}') 是目标对象，后面的参数都是源对象。
2.5 显示过滤/排序结果
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
例如：
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
2.6 v-for
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
//用在template上
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
//用在组件上
<my-component v-for="item in items" :key="item.id"></my-component>
2.7 v-for with v-if
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
上面的代码只传递了未 complete 的 todos。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
