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


Posted in Javascript onMay 17, 2017

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

v-for

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

示例:

<ul id="example-1">
 <li v-for="item in items">
 {{ item.message }}
 </li>
</ul>
var example1 = new Vue({
 el: '#example-1',
 data: {
 items: [
  { message: 'Foo' },
  { message: 'Bar' }
 ]
 }
})

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

<ul id="example-2">
 <li v-for="item 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 用于一个对象,则可以为对象的键指定一个别名):

<div v-for="(index, item) in items">
 {{ index }} {{ item.message }}
</div>

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

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

template v-for

类似于 template v-if,也可以将 v-for 用在 <template> 标签上,以渲染一个包含多个元素的块。例如:

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

数组变动检测

变异方法

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) {
 return item.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', ... }
 ]
}

然后可以这样给出提示:

<div v-for="item in items" track-by="_uid">
 <!-- content -->
</div>

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

track-by $index

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

这让数据替换非常高效,但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变,不能同步临时状态(比如 <input> 元素的值)以及组件的私有状态。因此,如果 v-for 块包含 <input> 元素或子组件,要小心使用 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() 。因此,不必这样:

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

只用这样:

this.items.$remove(item)

对象 v-for

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

<ul id="repeat-object" class="demo">
 <li v-for="value in object">
 {{ $key }} : {{ value }}
 </li>
</ul>
new Vue({
 el: '#repeat-object',
 data: {
 object: {
  FirstName: 'John',
  LastName: 'Doe',
  Age: 30
 }
 }
})

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

<div v-for="(key, val) in object">
 {{ key }} {{ val }}
</div>

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

值域 v-for

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

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

显示过滤/排序的结果

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

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

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

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

总结

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

Javascript 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
深入理解Commonjs规范及Node模块实现
May 17 #Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 #Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 #Javascript
Angular.JS中的this指向详解
May 17 #Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 #Javascript
JavaScript简单拖拽效果(1)
May 17 #Javascript
You might like
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
Javascript浅谈之this
2013/12/17 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Node.js + Redis Sorted Set实现任务队列
2016/09/19 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
layui实现table加载的示例代码
2018/08/14 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
Python下载网络小说实例代码
2018/02/03 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
师范毕业生求职自荐信
2013/09/25 职场文书
晚宴邀请函范文
2014/01/15 职场文书
阿德的梦教学反思
2014/02/06 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
政府四风问题整改措施
2014/10/04 职场文书
趣味运动会开幕词
2015/01/28 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
车间安全生产管理制度
2015/08/06 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP