v-for和数组笔记

v-if vs v-show区别
v-if：每次显示与否，都会执行销毁和重建，渲染开销较大
v-show：始终会被渲染并保留在DOM中。只是简单地切换display属性。
频繁切换的时候用v-if,较少切换用v-if

注意：不推荐同时使用 v-if 和 v-for

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

在v-for中使用数组

在 v-for 块中，我们可以访问所有父作用域的属性

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

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

也可以提供第二个的参数为 property 名称
<div v-for="(value, name) in object">
　　{{ name }}: {{ value }}
</div>
尽可能在使用 v-for 时提供 key 属性
<div v-for="item in items" v-bind:key="item.id">

</div>

数组变异方法
push() 数组末尾添加一个项目，arr.push(item)
pop() 数组末尾删除一个元素，arr.pop()
shift() 删除数组开头第1个元素，arr.shift()
unshift() 向开头添加1个或者多个元素，arr.unshift(item1,item2....)
splice() 删除或者添加项目，arr.splice(index,howmany,[item1,.....,itemX])
sort() 数组排序，arr.sort(sortNumber)
function sortNumber(a,b)
{
　　return a - b
}
数组非变异方法
filter() 通过一个方法，过滤数组中元素,arr.filter(getBoys)
concat() 连接2个或者多个数组,arr1.concat(arr2)
slice() 截取数组中对象，arr.slice(2,5)
使用非变异数组方法时，可以用新数组替换旧数组

猜你喜欢