6、列表渲染

---

title: 6、列表渲染
date: 2017-08-1 18:38:20
tags: vue笔记(妙味)

---

遍历数组

for指令根据一组数据的选项列表进行渲染，需要以item in tiems或item of tiems形式的特殊写法，item是数组的每一项，items是源数据数组。也有(item,index) in items的写法index是该item在数组中的索引。实际就是用for去遍历items数组。

<ul id="example-1">
    <li v-for="(item,index) in items">
        {{ index }} - {{ item.message }}
    </li>
</ul>

var app = new Vue({
    el: '#example-1',
    data:{
        items:[
            {message:'foo'},
            {message:'bar'}
        ]
    }
})

这里items是一个数组。

遍历对象

遍历的数据不仅可以是数组形式，也可以是对象的形式。

<div id="app">
    <ul>
        <!--只渲染value到列表中-->
        <li v-for="value in object">
            {{ value }}
        </li>
        <!--将key和value都渲染到列表中-->
        <li v-for="(value,key) in object">
            {{key}} : {{ value }}
        </li>
        <!--将index、key和value都渲染到列表中-->
        <li v-for="(value,key,index) in object">
            {{ index }} : {{ key }} : {{ value }}
        </li>
    </ul>
</div>

var app = new Vue({
    el: '#app',
    data: {
        object: {
            firstName: 'John',
            lastName: 'Doe',
            age: 30
        }
    }
})

也可以不通过数据去遍历，比如：

<div id="app">
    <ul>
        <li  v-for="n in 10">{{ n }}</li>
    </ul>
</div>

var app = new Vue({
    el: '#app'
})

这样最终就是10个<li>元素，内容分别就是1-10的数字。

通过模板渲染

v-for也可以通过模板渲染，而不是直接写在展示在页面中的html元素里。

<ul>
   <template v-for="item in items">
       <li>
           {{ item.msg }}
       </li>
   </template>
</ul>

<template>模板元素不会展示在页面中，只起到了遍历的作用。这个和上面只是两种写法，实际效果相同。

key属性

当Vue用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。是一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

如果不想用这种“就地复用”策略，就需要为每项提供一个唯一key属性。理想的key值是每项都有唯一id。它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。

<div id="app">
    <div v-for="item in items" v-bind:key="item.id">
        {{ item.msg }}
    </div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        items: [
            { id: '1',msg:'第一个' },
            { id: '2',msg:'第二个' },
            { id: '3',msg:'第三个' }
        ]
    }
})

变异方法

变异方法指的是这些方法名字和作用与原来相同，除此之外还可以在Vue中可以触发视图的更新。触发更新的原因是这些方法都会改变原数组，也就是改变了数据。

常用的变异方法包括：push() 、pop()、shift()、unshift()、splice()、sort()、reverse()。

var app = new Vue({
    el: '#app',
    data: {
        items: [
            { msg:'第一个' },
            { msg:'第二个' },
            { msg:'第三个' }
        ]
    }
})

app.items.push({ id: '4',msg:'BAZ' })        // push之后触发视图更新

非变异方法

如果是不改变原数组的方法就无法自动触发视图更新，比如：filter()、concat()、slice()。但可以通过重新赋值的方式触发。

app1.items = app1.items.fliter(function(item){
    return item.msg.match(/foo/)
})

这里替换旧数组并不会丢弃原有DOM重新渲染整个列表，相反这种替换原来数组的方法是很高效的操作

需要注意的是，由于js的限制，Vue不能检测以下变动的数组：

1. 当利用索引直接设置一个项时，例如： app.items[index] = {...}

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

当然也有替代的方法，效果相同，同时也将触发状态更新

代替第一个有两种方式：

1. Vue.set(app.items, index , {...})

2. app.items.splice(index , 1 , {...})

代替第二类问题，可以使用splice：

app.items.splice(num)

数组数据的过滤和排序

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

<ul id="app">
    <li v-for="n in eventNumbers">{{ n }}</li>
</ul>

var app = new Vue({
    el: '#app',
    data: {
        numbers: [1,2,3,4,5]
    },
    computed: {
        eventNumbers: function(){       // 不改变number，只产生一个新的数组，最终渲染2和4
            return this.numbers.filter(function(number){
                return number % 2 === 0
            })
        }
    }
})

最终不会改变numbers数组，只产生一个新的数组，最终渲染2和4。

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

<ul id="app1">
    <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

    var app1 = new Vue({
        el: '#app1',
        data: {
            numbers: [1,2,3,4,5]
        },
        methods: {
            even: function(numbers){
                return numbers.filter(function(number){
                    return number % 2 === 0
                })
            }
        }
    })