Vue.JS入门教程之列表渲染


Posted in Javascript onDecember 01, 2016

你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表。对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例。这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性。此外,你还可以通过 $index 属性来获取当前实例对应的数组索引。

<ul id="demo">
  <li v-repeat="items" class="item-{{$index}}">
  {{$index}} - {{parentMsg}} {{childMsg}}
  </li>
 </ul>
var demo = new Vue({
  el: '#demo',
  data: {
  parentMsg: 'Hello',
  items: [
   { childMsg: 'Foo' },
   { childMsg: 'Bar' }
  ]
  }
 })

查看一下效果,应该很容易得到结果

块级重复

有时我们可能需要重复一个包含多个节点的块,这时可以用 <template> 标签包裹这个块。这里的 <template> 标签只起到语义上的包裹作用,其本身不会被渲染出来。例如:

<ul>
  <template v-repeat="list">
  <li>{{msg}}</li>
  <li class="divider"></li>
  </template>
 </ul>

简单值数组

简单值 (primitive value) 即字符串、数字、boolean 等并非对象的值。对于包含简单值的数组,你可用 $value 直接访问值:

<ul id="tags">
  <li v-repeat="tags">
  {{$value}}
  </li>
 </ul>
new Vue({
  el: '#tags',
  data: {
  tags: ['JavaScript', 'MVVM', 'Vue.js']
  }
 })

使用别名
有时我们可能想要更明确地访问当前作用域的变量而不是隐式地回退到父作用域。你可以通过提供一个参数给 v-repeat 指令并用它作为将被迭代项的别名:

<ul id="users">
  <li v-repeat="user : users">
   {{user.name}} - {{user.email}}
  </li>
 </ul>
var users = new Vue({
  el: '#users',
  data: {
   users: [
    { name: 'Foo Bar', email: 'foo@bar.com' },
    { name: 'John Doh', email: 'john@doh.com' }
   ]
  }
 });

变异方法
Vue.js 内部对被观察数组的变异方法 (mutating methods,包括 push(), pop(), shift(), unshift(), splice(), sort() 和 reverse()) 进行了拦截,因此调用这些方法也将自动触发视图更新。

// 以下操作会触发 DOM 更新
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()

下面是一个演示的例子,点击按钮的时候数据项会被移除

<!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
 </head>
 <body>
  <ul id="tags">
   <li v-repeat="tags">
    {{$value}}
   </li>
  </ul>

  <input type="button" value="测试" onclick="myClick();">
 <script>
  var tag = new Vue({
   el: '#tags',
   data: {
    tags: ['标签一', '标签二', '标签三']
   }
  });

  function myClick(){
   tag.tags.pop();
  }
 </script>
 </body>
 </html>

扩展方法
Vue.js 给被观察数组添加了两个便捷方法:$set() 和 $remove() 。
你应该避免直接通过索引来设置数据绑定数组中的元素,比如 demo.items[0] = {},因为这些改动是无法被 Vue.js 侦测到的。你应该使用扩展的 $set() 方法:

// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: 'Changed!'})

$remove() 只是 splice()方法的语法糖。它将移除给定索引处的元素。当参数不是数值时,$remove() 将在数组中搜索该值并删除第一个发现的对应元素。

// 删除索引为 0 的元素。
demo.items.$remove(0)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
 <ul id="tags">
  <li v-repeat="tags">
   {{$value}}
  </li>
 </ul>

 <input type="button" value="测试" onclick="myClick();">
<script>
 var tag = new Vue({
  el: '#tags',
  data: {
   tags: ['标签一', '标签二', '标签三']
  }
 });

 function myClick(){
  //tag.tags.pop();
  //tag.tags[0] = '修改后的内容不生效';
  tag.tags.$set(0, '修改后的内容生效');
  tag.tags.$remove(1);
 }
</script>
</body>
</html>

替换数组
当你使用非变异方法,比如filter(), concat() 或 slice(),返回的数组将是一个不同的实例。在此情况下,你可以用新数组替换旧的数组:

demo.items = demo.items.filter(function (item) {
 return item.childMsg.match(/Hello/)
})

你可能会认为这将导致整个列表的 DOM 被销毁并重新渲染。但别担心,Vue.js 能够识别一个数组元素是否已有关联的 Vue 实例, 并尽可能地进行有效复用。

使用track-by(vue中track-by属性)
在某些情况下,你可能需要以全新的对象(比如 API 调用所返回的对象)去替换数组。如果你的每一个数据对象都有一个唯一的 id 属性,那么你可以使用 track-by 特性参数给 Vue.js 一个提示,这样它就可以复用已有的具有相同 id 的 Vue 实例和 DOM 节点。
例如:你的数据是这个样子的

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

那么你可以像这样给出提示:

<div v-repeat="items" track-by="_uid">
 <!-- content -->
</div>

在替换 items 数组时,Vue.js 如果碰到一个有 _uid: '88f869d' 的新对象,它就会知道可以直接复用有同样 _uid 的已有实例。在使用全新数据重新渲染大型 v-repeat 列表时,合理使用 track-by 能极大地提升性能。

遍历对象
你也可以使用 v-repeat 遍历一个对象的所有属性。每个重复的实例会有一个特殊的属性 $key。对于简单值,你也可以象访问数组中的简单值那样使用 $value 属性。

<ul id="repeat-object">
  <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
  <li>===</li>
  <li v-repeat="objectValues">{{$key}} : {{msg}}</li>
 </ul>
new Vue({
  el: '#repeat-object',
  data: {
   primitiveValues: {
    FirstName: 'John',
    LastName: 'Doe',
    Age: 30
   },
   objectValues: {
    one: {
     msg: 'Hello'
    },
    two: {
     msg: 'Bye'
    }
   }
  }
 });

在 ECMAScript 5 中,对于给对象添加一个新属性,或是从对象中删除一个属性时,没有机制可以检测到这两种情况。针对这个问题,Vue.js 中的被观察对象会被添加三个扩展方法: $add(key, value), $set(key, value) 和 $delete(key)。这些方法可以被用于在添加 / 删除观察对象的属性时触发对应的视图更新。方法 $add 和 $set 的不同之处在于当指定的键已经在对象中存在时 $add 将提前返回,所以调用 obj.$add(key) 并不会以 undefined 覆盖已有的值。

迭代值域
v-repeat 也可以接受一个整数。在这种情况下,它将重复显示一个模板多次。下面的例子将迭代3次

<div id="range">
  <div v-repeat="val">Hi! {{$index}}</div>
 </div>
new Vue({
  el: '#range',
  data: {
   val: 3
  }
 });

数组过滤器
有时候我们只需要显示一个数组的过滤或排序过的版本,而不需要实际改变或重置原始数据。Vue 提供了两个内置的过滤器来简化此类需求: filterBy 和 orderBy。

<input v-model="searchText">
<ul>
 <li v-repeat="users | filterBy searchText">{{name}}</li>
</ul>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
input框中的name和id的区别
Nov 16 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
Vue.JS入门教程之处理表单
Dec 01 #Javascript
利用js获取下拉框中所选的值
Dec 01 #Javascript
js微信扫描二维码登录网站技术原理
Dec 01 #Javascript
Bootstrap的class样式小结
Dec 01 #Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 #Javascript
AngularJS中的JSONP实例解析
Dec 01 #Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 #Javascript
You might like
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php中关于换行的实例写法
2019/09/26 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
python定时器使用示例分享
2014/02/16 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python爬虫工具例举说明
2020/11/30 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
大学生党员自我批评
2014/02/14 职场文书
新文化运动的基本口号
2014/06/21 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
个人承诺书格式范文
2015/04/29 职场文书
孔子观后感
2015/06/08 职场文书
Python实现简单的猜单词
2021/06/15 Python
create-react-app开发常用配置教程
2022/06/25 Javascript