深入浅析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 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
为什么说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
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python处理xml文件的方法小结
2017/05/02 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
Python实现登陆文件验证方法
2018/10/06 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python中bisect的使用方法
2019/12/31 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
10条PHP编程习惯
2014/05/26 面试题
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
教师教学评估方案
2014/05/09 职场文书
综治目标管理责任书
2015/05/11 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python