首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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前端组件学习教程》，欢迎大家学习阅读。

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

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

- Author -

hutou

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
浅谈React高阶组件
Mar 28 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
JavaScript实例 ODO List分析
Jan 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
while(1) 监听(2) for(1) sched(1) 事件调度器(1) okenizer(1) 无限迭代(1) 分词器(1) re模块(2) watch(1)
You might like
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
js 判断 enter 事件
2009/02/12 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python 读写文件,按行修改文件的方法
2018/07/12 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
django最快程序开发流程详解
2019/07/19 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
上班离岗检讨书
2014/09/10 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
法院个人总结
2015/03/03 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
2019同学聚会主持词
2019/05/06 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
React自定义hook的方法
2022/06/25 Javascript