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

2019-11-19 12:30:05

字体：大中小

来源：转载

供稿：网友

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>

效果：

在 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>

效果：

也可以使用内置标签 <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”将开业... ...'} ] }});

效果：

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 } }});

效果：

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

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'});

效果：

2 更新数组

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

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

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

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

js：

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

效果：

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

filter()
concat()
slice()

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

js：

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

效果：

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

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

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

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

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

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

效果：

也可以使用 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 ）：