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 相关文章推荐
JavaScript高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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 清除网页病毒的方法
2008/12/05 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
Python中字符串对齐方法介绍
2015/05/21 Python
Python实现处理管道的方法
2015/06/04 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
公务员诚信承诺书
2014/05/26 职场文书
领导干部考核评语
2015/01/04 职场文书
工作犯错保证书
2015/05/11 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
活动简报范文
2015/07/22 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电