深入分析Vue.js中的v-for列表呈现指令

1基本用法

当遍历数组或枚举对象进行迭代循环显示时，将使用列表呈现指令v-for。它的表达式需要和in组合，类似于item中item的形式。

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 : '被智能手机绑架的一代我爱熬夜，拒绝谈恋爱，不考驾照')，{title : '黑莓宣布以14亿美元收购网络安全公司Cylance '，{ title :} ] } });/脚本效果：

在v-for指令的表达式中，news是数据中定义的数据，n是当前数组元素的别名。

列表呈现指令的表达式还支持使用作为分隔符。

html:

新闻的表达式liv-for=' n ' { n . title } }/liv-for支持当前项目的索引参数，索引从0开始，这是可选的。

html:

新闻的Li v-for=' (n，index)' { index } }-{ { n . title } }/Lieffect:

您还可以使用内置的标记模板来呈现多个元素。

html:

div id='app2' dl模板v-for=' n in news ' dt { { n . title } }/dt DD { { n . content } }/DD/template/dl/div js:

varap 2=new vue({ El : ' # app 2 '，data: {news3360 [{title: '科技'，content: '智能手机是我们生活中的好帮手' }，{title: '互联网'，Content: '黑莓周五宣布.'}，{title:' Society '，content: '阿里实体酒店' FlyZoo Hotel '即将开业.'}]});效果：

1.2遍历对象属性

我们还可以使用v-for列表呈现指令来遍历对象属性。

html:

帐户“{val}}/li/divjs中的div id='app3' li v-for='val:

var app3=new Vue({ el: '#app3 '，data : { account : { name : ' deniro '，message count : 100 } })；效果：

使用两个可选参数遍历对象属性，这两个参数是对象的属性名称和索引：

html:

Li v-for=' (val，name，index)在帐户“{索引}}-{{name}} : {{val}}/li 1.3迭代整数

html:

div id=' app 4 ' ul Li v-for=' I in 5 ' { I } }/Li/ul/div js:

var app 4=new Vue({ El : ' # app 4 ' })；效果：

2更新阵列

Vue.js的核心是数据和视图的双向绑定。因此，当我们修改数组时，Vue.js将检测到数据已经更改，因此用v-for呈现的视图也将更新。通过以下方法修改数组时，会触发视图更新：

push()Shift()Unshift()Splice()Sort()Reverse()这些方法会改变原来的数组，所以也叫变异方法。

我们使用push()向应用程序对象添加新闻标题：

js:

App.news.push({ title: '沃尔玛将超越苹果成为美国第三大在线零售商' })；效果：

还有一些非变异的方法，不会改变原来的数组，只返回新的数组：

Filter() concat() slice()当我们使用这些方法时，我们可以通过设置一个新的数组来更新视图。

js:

//用非变异方法更新数组app.news=app.news.filter(函数(项){ return item . title . match(/Alibaba/)；});效果：

在这个例子中，我们使用过滤功能过滤掉新闻标题中带有“阿里巴巴”字样的新闻。

Vue.js将在检测数组变化时最大限度地重用DOM元素。替换数组，如果具有相同元素的项不会被重新呈现，那么不要担心性能。

注意：通过以下方式更改数组无法检测到Vue.js，因此不会更新视图：

App。新[1]={ 0.} app。new.length=1我们可以使用Vue.js中内置的set方法(可以指定索引)来更新数组：

//通过设置集合的索引，更新数组Vue.set(app.news，1，{ title: '大数据下的锦鲤鱼：为什么你的微博总是不能中奖' })；效果：

您也可以使用拼接指定索引来更新数组：

//更新数组app.news.splice (1，0，{title : '南京现在“刷脸付”超市用户：苏烟可以去收银机了解' })；至于第二个问题，也可以通过拼接实现：

//通过拆分删除数组元素app . news . splice(1)；上面的示例演示。

3筛选或排序

实际上，在使用filter()过滤方法之前已经有过一个例子。如果我们不想改变原始数组，我们只想返回过滤或排序后的数组副本，这可以通过使用计算属性来实现。

html:

Div id=' app在filter news“{ index } }-{ { n . title } }/Li/ul H3中筛选出标题为“dollar”/h3ul liv-for=' (n，index)的标题，按标题长度从短到长排序/h3ul liv-for='(n，index

script var app=new vue({ El : ' # app '，data : { news :[{title : '被智能手机绑架的一代我爱熬夜，拒绝谈恋爱，不考驾照')，{title : '黑莓宣布以14亿美元收购网络安全公司Cylance '，{ title :}] }，计算出： {//过滤掉标题过滤新闻： Function(){ Return this . News . Filter(Function(item){ Return item . title . match(/USD/)；})}，//Sort news :函数(){返回这个。news.sort(函数(val 1，val 2) {if (val 1。title.length val 2。title . length){ return-1；} }) } } });/脚本效果(演示):

摘要

以上是边肖介绍的Vue.js中的v-for列表渲染指令。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！