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 相关文章推荐
自动更新作用
Oct 08 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
php register_shutdown_function函数详解
Jul 23 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
jQuery实现评论模块
Aug 19 jQuery
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图片添加水印例子
2016/07/20 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
javascript实现二分查找法实现代码
2007/11/12 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
初识Javascript小结
2015/07/16 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python中Threading用法详解
2017/12/27 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python3.5的包存放的具体路径
2020/08/16 Python
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
化学教学随笔感言
2014/02/19 职场文书
法律进企业活动方案
2014/03/04 职场文书
晨会主持词
2014/03/17 职场文书
经济管理专业求职信
2014/06/09 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
联欢会开场白
2015/06/01 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python