列表渲染 v-for

一、用 v-for 把一个数组对应为一组元素

　　用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是元数据数组，而 item 则是被迭代的数组元素的别名：

<div id="test">
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>
</div>

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

　　结果为：

 

 　　在 v-for 中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。

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

var test2 = new Vue({
        el: '#test2',
        data: {
            parentMessage: 'Parent',
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    })

　　结果为：

 

 　　也可以用 of 替代 in 作为分隔符，因为它更接近 js 迭代器的语法：

<div v-for="item of items"></div>

二、v-for 里面使用对象

　　可以用 v-for 来遍历一个对象的 property，遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 js 引擎下都一致：

<div id="test">
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
</div>

var test = new Vue({
        el: '#test',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })

　　结果为：

 

 　　也可以提供第二个参数为 property 名称 (也就是键名):

<div id="test2">
    <ul class="demo">
        <li v-for="(value, name) in object">
           {{ name }} {{ value }}
        </li>
    </ul>
</div>

var test2 = new Vue({
        el: '#test2',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })

　　结果为：

 

 　　还可以用第三个参数作为索引：

<div id="test3">
    <ul class="demo">
        <li v-for="(index,value, name) in object">
            {{ name }} . {{ value }} : {{ index }}
        </li>
    </ul>
</div>

var test3 = new Vue({
        el: '#test3',
        data: {
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })

　　结果为：

 

 三、维护状态：

　　当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用 “就地更新” 的策略。如果数据项的顺序被改变，Vue将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且保证它们在每个索引位置正确渲染。

　　这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值)的列表渲染输出。

　　不要使用 对象或数组 之类的非基本类型值座位 v-for 的 key。请用字符串或树枝类型的值。

　　为了让 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key attribute：

<div id="test1">
    <ul  class="demo">
        <li v-for="item in items" v-bind:key="item.id">
            {{ item.message }}
        </li>
    </ul>
</div>

var test1 = new Vue({
        el: '#test1',
        data: {
            items: [
                { message: 'Foo', id: '1' },
                { message: 'Bar', id: '2' }
            ]
        }
    })

　　结果为：

 

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

四、数组更新检测：

　　1、变更方法：

　　　　Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

　　　　push()、pop()、shift()、unshift()、splice()、sort()、reverse()

　　　　可以打开控制台，对已有的数组例子尝试调用变更方法。

　　2、替换数组：

　　　　变更方法，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat()、slice()。它们不会变更原始数组，而总是返回一个新数组。当使用变更方法时，可以用新数组替换旧数组；

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

　　　　可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

五、显示过滤/排序后的结果

　　在一些情况下，我们想要显示一个数组经过过滤/排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤/排序后的数组；

div id="test">
    <li v-for="n in evenNumbers">{{ n }}</li>
</div>

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

　　结果为：

 

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

<div id="test2">
    <ul v-for="set in sets">
        <li v-for="n in even(set)">{{ n }}</li>
    </ul>
</div>

var test2 = new Vue({
        el: '#test2',
        data: {
            sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
        },
        methods: {
            even: function (numbers) {
                return numbers.filter(function (number) {
                    return number % 2 === 0
                })
            }
        }
    })

　　结果为：

六、在 v-for 里使用值范围

　　v-for 也可以接受整数。在这种情况下，它会把模版重置对应次数：

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

var test = new Vue({
        el: '#test',
        data: {
            n: 1
        }
    })

　　结果为：

 

 七、在 <template> 中使用 v-for

　　类似与 v-if，也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容：

<div id="test">
    <ul>
        <template v-for="item in items">
            <li>{{ item.msg }}</li>
            <li class="divider" role="presentation"></li>
        </template>
    </ul>
</div>

var test = new Vue({
        el: '#test',
        data: {
            items: [
                { msg: 'Foo' },
                { msg: 'Bar' }
            ]
        }
    })

　　结果为：

 

 八、v-for 和 v-if 一起使用：

　　不推荐在同一元素上使用 v-if 和 v-for。

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