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

2020-06-14 06:17:26易采站长站整理

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

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, {