arraypush(array push后数据不变)
vue的列表渲染
1、用v-for把一个数组对应为一组元素
代码如下,可以遍历出数组的内容:
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }} </li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: { items: [ { message: 'Foo' },
{ message: 'Bar' } ] } })
也可以访问所有父作用域的property,还支持一个可选的第二个参数。
代码如下:
<ul id="example-2">
<li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
var example2 = new Vue({
el: '#example-2', data: {
parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
也可以使用of替代掉in
2、在v-for里使用对象
代码如下:
<ul id="v-for-object" class="demo">
<li v-for="value in object"> {{ value }}
</li> </ul>
new Vue({
el: '#v-for-object',
data: { object: {
title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' } } })
跑出来的效果,是遍历了title和author和publishedAt的内容。
可以使用第二个参数,跑出来的效果会有两个值,代码如下:
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
跑出来的效果,name为title、author、publishedAt,value为具体对应的值。
3、维护状态
当vue正在使用v-for渲染元素列表时,默认使用“就地更新”策略,如果顺序改变,vue不会移动DOM元素匹配数据项的顺序,而是就地更新每个元素。
4、数据更新检测
使用以下方法时,会变更原始数组,具体方法如下:push(),pop(),shift(),unshift(),splice(),sort(),reverse()。
而下面几个数组不会更改原始数组,而是返回一个新数组。具体为filter()、concat() 和 slice()。
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 })
} }
在计算属性不适用的情况下,可以使用方法实现。
<ul v-for="set in sets"> <li v-for="n in even(set)">{{ n }}</li> </ul>
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 }) } }
6、v-for可以使用值范围
<div> <span v-for="n in 10">{{ n }} </span> </div>
7、在<template>上使用v-for,也可以使用。
8、不推荐v-for和v-if一同使用





