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 ）：
总结
以上所述是小编给大家介绍的Vue.js 中的 v-for 列表渲染指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]