好资源导航 » 文章资讯 » Vue.js学习教程之列表渲染详解

Vue.js学习教程之列表渲染详解

2024-02-23 15:55:04 50

本文主要给大家介绍了关于Vue.js列表渲染的相关资料，分享出来给大家参考学习，下面来看看详细的介绍：

v-for

可以使用v-for指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为iteminitems，items是数据数组，item是当前数组元素的别名：

示例：



{{item.message}}

varexample1=newVue({
el:'#example-1',
data:{
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})

在v-for块内我们能完全访问父组件作用域内的属性，另有一个特殊变量$index，正如你猜到的，它是当前数组元素的索引：



{{parentMessage}}-{{$index}}-{{item.message}}

varexample2=newVue({
el:'#example-2',
data:{
parentMessage:'Parent',
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})

另外，你可以为索引指定一个别名（如果v-for用于一个对象，则可以为对象的键指定一个别名）：


{{index}}{{item.message}}

从1.0.17开始可以使用of分隔符，更接近JavaScript遍历器语法：

templatev-for

类似于templatev-if，也可以将v-for用在

数组变动检测

变异方法

Vue.js包装了被观察数组的变异方法，故它们能触发视图更新。

被包装的方法有：

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

你可以打开浏览器的控制台，用这些方法修改上例的items数组。例如：example1.items.push({message:'Baz'})。

替换数组

变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如filter(),concat()和slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：

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

可能你觉得这将导致Vue.js弃用已有DOM并重新渲染整个列表——幸运的是并非如此。Vue.js实现了一些启发算法，以最大化复用DOM元素，因而用另一个数组替换数组是一个非常高效的操作。

track-by

有时需要用全新对象（例如通过API调用创建的对象）替换数组。因为v-for默认通过数据对象的特征来决定对已有作用域和DOM元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一ID的属性，便可以使用track-by特性给Vue.js一个提示，Vue.js因而能尽可能地复用已有实例。

例如，假定数据为：

{
items:[
{_uid:'88f869d',...},
{_uid:'7496c10',...}
]
}

然后可以这样给出提示：

然后在替换数组items时，如果Vue.js遇到一个包含_uid:'88f869d'的新对象，它知道它可以复用这个已有对象的作用域与DOM元素。

track-by$index

如果没有唯一的键供追踪，可以使用track-by="$index"，它强制让v-for进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。

这让数据替换非常高效，但是也会付出一定的代价。因为这时DOM节点不再映射数组元素顺序的改变，不能同步临时状态（比如元素的值）以及组件的私有状态。因此，如果v-for块包含元素或子组件，要小心使用track-by="$index"

问题

因为JavaScript的限制，Vue.js不能检测到下面数组变化：

1.直接用索引设置元素，如vm.items[0]={}；

2.修改数据的长度，如vm.items.length=0。

为了解决问题(1)，Vue.js扩展了观察数组，为它添加了一个$set()方法：

//与`example1.items[0]=...`相同，但是能触发视图更新
example1.items.$set(0,{childMsg:'Changed!'})

至于问题(2)，只需用一个空数组替换items。

除了$set()，Vue.js也为观察数组添加了$remove()方法，用于从目标数组中查找并删除元素，在内部它调用splice()。因此，不必这样：

varindex=this.items.indexOf(item)
if(index!==-1){
this.items.splice(index,1)
}

只用这样：

this.items.$remove(item)

对象v-for

也可以使用v-for遍历对象。除了$index之外，作用域内还可以访问另外一个特殊变量$key。



{{$key}}:{{value}}

newVue({
el:'#repeat-object',
data:{
object:{
FirstName:'John',
LastName:'Doe',
Age:30
}
}
})

也可以给对象的键提供一个别名：


{{key}}{{val}}

在遍历对象时，是按Object.keys()的结果遍历，但是不能保证它的结果在不同的JavaScript引擎下是一致的。

值域v-for

v-for也可以接收一个整数，此时它将重复模板数次。


{{n}}

显示过滤/排序的结果

有时我们想显示过滤/排序过的数组，同时不实际修改或重置原始数据。有两个办法：

1.创建一个计算属性，返回过滤/排序过的数组；

2.使用内置的过滤器filterBy和orderBy。

计算属性有更好的控制力，也更灵活，因为它是全功能JavaScript。但是通常过滤器更方便，详细见API。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

返回顶部
514930285
czq8825@qq.com

Vue.js学习教程之列表渲染详解

热门推荐

随机推荐