深入浅析Vue.js 中的 v-for 列表渲染指令


Posted in Javascript onNovember 19, 2018

1 基本用法

当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用,类似 item in items 的形式。

1.1 遍历数组

html:

<div id="app">
 <ul>
 <li v-for="n in news">{{n.title}}</li>
 </ul>
</div>

js:

<script>
 var app = new Vue({
 el: '#app',
 data: {
  news: [
  {title: '被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照'},
  {title: '黑莓宣布14亿美元收购网络安全公司Cylance'},
  {title: '如何看待阿里巴巴开酒店这件事?'}
  ]
 }
 });
</script>

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

在 v-for 指令的表达式中, news 是 data 内定义的数据, n 是当前数组元素的别名。

列表渲染指令的表达式也支持使用 of 作为分隔符。

html:

<li v-for="n of news">{{n.title}}</li>

v-for 表达式支持当前项索引参数,索引从 0 开始,它是可选的 。

html:

<li v-for="(n,index) of news">{{index}} - {{n.title}}</li>

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

也可以使用内置标签 <template> ,渲染多个元素。

html:

<div id="app2">
 <dl>
 <template v-for="n in news">
  <dt>{{n.title}}</dt>
  <dd>{{n.content}}</dd>
 </template>
 </dl>
</div>

js:

var app2 = new Vue({
 el: '#app2',
 data: {
 news: [
  {title: '科技',content:'智能手机是我们生活的好帮手... ...'},
  {title: '互联网',content:'黑莓公司周五宣布... ...'},
  {title: '社会',content:'阿里实体酒店“FlyZoo Hotel”将开业... ...'}
 ]
 }
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

1.2 遍历对象属性

我们也可以使用 v-for 列表渲染指令来遍历对象属性。

html:

<div id="app3">
 <li v-for="val in account">{{val}}</li>
</div>

js:

var app3 = new Vue({
 el: '#app3',
 data: {
 account: {
  name: 'deniro',
  messageCount: 100
 }
 }
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

遍历对象属性,可以带上两个可选参数,它们就是对象的属性名和索引:

html:

<li v-for="(val,name,index) in account">{{index}} - {{name}} : {{val}}</li>

1.3 迭代整数

html:

<div id="app4">
 <ul>
 <li v-for="i in 5">{{i}}</li>
 </ul>
</div>

js:

var app4 = new Vue({
 el: '#app4'
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

2 更新数组

Vue.js 的核心是数据与视图的双向绑定。因此当我们修改数组时, Vue.js 就会检测到数据了变化,所以用 v-for 渲染的视图也会更新 。使用以下方法修改数组时,就会触发视图更新:

  • push()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

这些方法会改变原数组,所以又称为变异方法。

我们使用 push() 为 app 对象新增一个新闻标题:

js:

app.news.push({
 title:'沃尔玛将超过苹果成美国第三大在线零售商'
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

也有一些非变异方法,它们不会改变原数组,只会返回新数组:

  • filter()
  • concat()
  • slice()

我们在使用这些方法时,可以通过设置新数组的方式来更新视图。

js:

//非变异方法更新数组
 app.news = app.news.filter(function (item) {
 return item.title.match(/阿里巴巴/);
 });

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

这个示例中,我们使用 filter 函数,把新闻标题中含有“阿里巴巴”字样的新闻过滤出来。

Vue.js 在检测数组变化时,会最大化地复用 DOM 元素。 替换的数组,如果含有相同元素的项并不会被重新渲染,所以不用担心性能问题。

注意:通过以下方法来改变数组, Vue.js 是无法检测的,所以不会更新视图:

app.new[1]={...}
app.new.length=1

我们可以使用 Vue.js 内置的 set 方法(可指定索引)来更新数组:

//通过 set 的设置索引方式来更新数组
Vue.set(app.news,1,{
 title: '大数据之下的锦鲤:为什么你的微博总抽不到奖'
});

效果:

深入浅析Vue.js 中的 v-for 列表渲染指令

也可以使用 splice 指定索引来更新数组:

//通过 splice 的设置索引方式来更新数组
app.news.splice(1, 0, {
 title: '南京现“刷脸支付”超市 网友:素颜去结账机器能识'
});

至于第二个问题,同样可以通过 splice 来实现:

//通过 splice 来删除数组元素
app.news.splice(1);

以上示例 demo 。

3 过滤或排序

其实,之前已经有一个示例用到了 filter() 过滤方法。如果我们不想改变原数组,只想返回过滤或排序后数组副本,这时可以使用计算属性来实现。

html:

<div id="app">
 <h3>过滤出带“美元”的标题</h3>
 <ul>
 <li v-for="(n,index) in filterNews">{{index}} - {{n.title}}</li>
 </ul>
 <h3>按照标题长度,由短到长排序</h3>
 <ul>
 <li v-for="(n,index) in sortNews">{{index}} - {{n.title}}</li>
 </ul>
</div>

js:

<script>
 var app = new Vue({
 el: '#app',
 data: {
  news: [
  {title: '被智能手机绑架的i世代 爱熬夜、拒绝恋爱、不考驾照'},
  {title: '黑莓宣布14亿美元收购网络安全公司Cylance'},
  {title: '如何看待XXX开酒店赚美元这件事?'}
  ]
 },
 computed: {
  //过滤出带“美元”的标题
  filterNews: function () {
  return this.news.filter(function (item) {
   return item.title.match(/美元/);
  })
  },
  //按照标题长度,由短到长排序
  sortNews: function () {
  return this.news.sort(function (val1, val2) {
   if(val1.title.length < val2.title.length){
   return -1;
   }
  })
  }
 }
 });
</script>

效果( demo ):

深入浅析Vue.js 中的 v-for 列表渲染指令

总结

以上所述是小编给大家介绍的Vue.js 中的 v-for 列表渲染指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JavaScript CSS修改学习第三章 修改样式表
Feb 19 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
vue将对象新增的属性添加到检测序列的方法
Feb 24 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 #Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 #Javascript
Javascript实现动态时钟效果
Nov 17 #Javascript
使用Javascript简单计算器
Nov 17 #Javascript
JS实现图片切换效果
Nov 17 #Javascript
js实现导航跟随效果
Nov 17 #Javascript
JavaScript实现新年倒计时效果
Nov 17 #Javascript
You might like
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
PHP实现的策略模式示例
2019/03/20 PHP
img的onload的另类用法
2008/01/10 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
"引用"与多态的关系
2013/02/01 面试题
什么是规则表达式
2012/05/03 面试题
初一学生期末评语
2014/04/24 职场文书
班子四风对照检查材料
2014/08/21 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
学校节水倡议书
2015/04/29 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android