135-1821-9792
1 基本用法
公司主营业务：做网站、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出赤城免费做网站回馈大家。
当遍历一个数组或枚举一个对象进行迭代循环展示时，就会用到列表渲染指令 v-for。 它的表达式需要结合 in 来使用，类似 item in items 的形式。
1.1 遍历数组
html：
- {{n.title}}
js：
效果：
在 v-for 指令的表达式中， news 是 data 内定义的数据， n 是当前数组元素的别名。
列表渲染指令的表达式也支持使用 of 作为分隔符。
html：
v-for 表达式支持当前项索引参数，索引从 0 开始，它是可选的 。
html：
效果：
也可以使用内置标签 ，渲染多个元素。 html： js： 效果： 1.2 遍历对象属性 我们也可以使用 v-for 列表渲染指令来遍历对象属性。 html： js： 效果： 遍历对象属性，可以带上两个可选参数，它们就是对象的属性名和索引： html： 1.3 迭代整数 html： js： 效果： 2 更新数组 Vue.js 的核心是数据与视图的双向绑定。因此当我们修改数组时， Vue.js 就会检测到数据了变化，所以用 v-for 渲染的视图也会更新 。使用以下方法修改数组时，就会触发视图更新： 这些方法会改变原数组，所以又称为变异方法。 我们使用 push() 为 app 对象新增一个新闻标题： js： 效果： 也有一些非变异方法，它们不会改变原数组，只会返回新数组： 我们在使用这些方法时，可以通过设置新数组的方式来更新视图。 js： 效果： 这个示例中，我们使用 filter 函数，把新闻标题中含有“阿里巴巴”字样的新闻过滤出来。 Vue.js 在检测数组变化时，会最大化地复用 DOM 元素。 替换的数组，如果含有相同元素的项并不会被重新渲染，所以不用担心性能问题。 注意：通过以下方法来改变数组， Vue.js 是无法检测的，所以不会更新视图： 我们可以使用 Vue.js 内置的 set 方法（可指定索引）来更新数组： 效果： 也可以使用 splice 指定索引来更新数组： 至于第二个问题，同样可以通过 splice 来实现： 以上示例 demo 。 3 过滤或排序 其实，之前已经有一个示例用到了 filter() 过滤方法。如果我们不想改变原数组，只想返回过滤或排序后数组副本，这时可以使用计算属性来实现。 html： js： 效果（ demo ）： 总结 以上所述是小编给大家介绍的Vue.js 中的 v-for 列表渲染指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！ Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有 蜀ICP备19037934号
var app2 = new Vue({
el: '#app2',
data: {
news: [
{title: '科技',content:'智能手机是我们生活的好帮手... ...'},
{title: '互联网',content:'黑莓公司周五宣布... ...'},
{title: '社会',content:'阿里实体酒店“FlyZoo Hotel”将开业... ...'}
]
}
});
var app3 = new Vue({
el: '#app3',
data: {
account: {
name: 'deniro',
messageCount: 100
}
}
});
var app4 = new Vue({
el: '#app4'
});app.news.push({
title:'沃尔玛将超过苹果成美国第三大在线零售商'
});
//非变异方法更新数组
app.news = app.news.filter(function (item) {
return item.title.match(/阿里巴巴/);
});
app.new[1]={...}
app.new.length=1//通过 set 的设置索引方式来更新数组
Vue.set(app.news,1,{
title: '大数据之下的锦鲤：为什么你的微博总抽不到奖'
});
//通过 splice 的设置索引方式来更新数组
app.news.splice(1, 0, {
title: '南京现“刷脸支付”超市 网友：素颜去结账机器能识'
});//通过 splice 来删除数组元素
app.news.splice(1);
过滤出带“美元”的标题
按照标题长度，由短到长排序
标题名称：深入浅析Vue.js中的v-for列表渲染指令
当前URL：http://wtcwzsj.com/article/ggcgod.html
其他资讯
在线咨询
在线咨询
