深入浅析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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
JS面向对象编程详解
Mar 06 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
使用Vue 实现滑动验证码功能
Jun 27 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
自动更新作用
2006/10/08 Javascript
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python写xml文件的操作实例
2014/10/05 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Python装饰器用法实例总结
2018/05/26 Python
使用python实现多维数据降维操作
2020/02/24 Python
Python实现仿射密码的思路详解
2020/04/23 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
工商管理专业实习生自我鉴定
2013/09/29 职场文书
管理专员自荐信
2014/01/26 职场文书
体育课课后反思
2014/04/24 职场文书
南京大屠杀观后感
2015/06/02 职场文书
走进科学观后感
2015/06/18 职场文书
Java完整实现记事本代码
2022/06/16 Java/Android