vue-列表渲染
v-for与对象
可以使用v-for来便利一个对象的所有属性。便利的顺序会给予对该对象调用Object.keys()的返回值来决定。
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
在上使用
与模版上的v-if类似,你也可以在template标签上使用v-for来渲染一个包含多个元素的块。
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
v-for与v-if
注意:不推荐同时使用v-if和v-for,因为二者的优先级不明显。
当它们同时存在于一个节点上时,v-if比v-for的优先级更高。这意味着v-if的条件将无法访问到v-for作用域内定义的变量名。
<!--
这会抛出一个错误,因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo.name }}
</li>
解决方法:
在外新包装一层在在其上使用v-for可以解决这个问题
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
通过key管理状态
Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时,Vue不会随之移动Dom元素的顺序,而是就地更新每个元素,确保它们在原本指定的索引位置上渲染。
此默认模式,只适用于列表渲染输出的结果不依赖子组件状态或者临时DOM状态的情况。
为了给Vue一个提示,以便它可以跟踪每个节点的标识,从而重用和重新排序现有的元素,需要为每个与阿奴对应的块提供一个唯一的key属性
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
推荐在任何可行的时候为v-for添加一个key,不要用对象作为v-for的key。
在组件上使用v-for
我们可以直接在组件上使用v-for,但是不会自动将任何数据传递给组件,因为组件有自己独立的作用域。还需要传递props。
<MyComponent
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
/>
Vue能够侦听响应式数组的变更方法
包括:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
相对地,也有一些不可方法,如filter(),concat(),slice(),都不会改变原数组,返回一个新数组。此时将旧数组替换为新的就行。
此情况下Vue不会丢弃现有的DOM并重新渲染整个列表。Vue实现了一些巧妙的方法来最大化对DOM元素的重用。
- 本文链接:https://archer-lan.github.io/2023/11/20/vue-%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93/
- 版权声明:本博客所有文章除特别声明外,均默认采用 许可协议。