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