vue基础六

列表渲染

1.v-for

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法（也可以用of代替in）， items是源数据数组并且 item 是数组元素迭代的别名。

1.1基本用法

<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' }

　　　　]

　　}

})

v-for 还支持一个可选的第二个参数为当前项的索引。

<ul id="example-2">

<li v-for="(item, index) in items">

　　 {{ index }} - {{ item.message }}

</li>

</ul>

1.2Template v-for

类似于 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块。

<ul>

<template v-for="item in items">

<li>{{ item.msg }}</li>

<li class="divider"></li>

</template>

</ul>

1.3对象迭代v-for

也可以用 v-for 通过一个对象的属性来迭代。

<ul id="repeat-object" class="demo">

　　<li v-for="value in object">

　　　　{{ value }}

　　</li>

</ul>

new Vue({

　　el: '#repeat-object',

　　data: {

　　object: {

　　　　FirstName: 'John',

　　　　LastName: 'Doe',

　　　　Age: 30

　　　　}

　　}

})

你也可以提供第二个的参数为键名，第三个参数为索引。

1.4整数迭代v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。

<div>

　　<span v-for="n in 10">{{ n }}</span>

</div>

1.5组件和v-for

在自定义组件里，你可以像任何普通元素一样用 v-for 。<my-component v-for="item in items"></my-component>，但是因为组件有自己独立的作用域，为了传递迭代数据到组件里，我们要用 props。

2.key

 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key属性。理想的 key 值是每项都有唯一 id。

建议尽可能使用 v-for 来提供 key ，除非迭代 DOM 内容足够简单，或者你是故意要依赖于默认行为来获得性能提升。

3.数组更新检测

3.1变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法有：push()、pop()、shift()、unshift()、splice()、sort()、reverse()。

3.2重塑数组

变异方法会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。

3.3注意事项

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

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

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

为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：

// Vue.set

Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`

example1.items.splice(indexOfItem, 1, newValue)

避免第二种情况，使用 splice：

example1.items.splice(newLength)

4.显示过滤/排序结果

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

<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

})

}

}