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 相关文章推荐
Javascript注入技巧
Jun 22 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 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环境――Appserv
2006/12/13 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
JS中图片压缩的方法小结
2017/11/14 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
vue实现简单的登录弹出框
2020/10/26 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
Python使用turtule画五角星的方法
2015/07/09 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
学术会议欢迎词
2014/01/09 职场文书
医学类个人求职信范文
2014/02/05 职场文书
技能竞赛活动方案
2014/02/21 职场文书
党员一帮一活动总结
2014/07/08 职场文书
董事长岗位职责
2015/02/13 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
nginx lua 操作 mysql
2022/05/15 Servers
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers