深入浅析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 反科里化 this [译]
Sep 20 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
微信公众号网页分享功能开发的示例代码
May 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
神族 PROTOSS 概述
2020/03/14 星际争霸
PHP 防恶意刷新实现代码
2010/05/16 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python 实现简单的客户端认证
2020/07/29 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
化工专业应届生求职信
2013/11/08 职场文书
面料业务员岗位职责
2013/12/26 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers