实例讲解vue v-for 数据处理

小云云
发布: 2018-05-18 10:04:26
原创
3630 人浏览过

前面我们和大家分享了vue组件中v for指令介绍及使用v-for出现告警问题解析内容,本文我们将和大家分享vue v-for 数据处理,v-for的基本使用 :使用 v-for="item in list" 或者 v-for="item of list" 进行遍历,使用list:list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}] 时为了方便扩展, 更贴近实际项目需求。

  • {{item.n}}

登录后复制

v-for 给了两个参数 key 和 index

这里需要对遍历的数据 分为 数组 和 对象分别对待

数组下是没有 key值的

而对象下可以得到参数key值 实际显示效果如下:

  • {{item.n}}

    index={{ index }}

    key={{key}}

{{item}}:{{key}}:{{index}}

登录后复制

v-for支持等数迭代

v-for="n in 10"

借助这个可以分步加载 数据,控制m值就行了

{{list[i-1].n}}

登录后复制

注意:

遍历对象时使用不能this绑定组件,只能在处理函数中传入index 或其他的一些特征值来对当前list选定,再进行操作。

  • {{item.n}}

    index={{ index }}

    key={{key}}

    remove this

登录后复制

登录后复制
methods:{ removethis:function(index){ this.list.splice(index,1)
登录后复制

对data 的数组app.list[1]={n:33}直接赋值操作不能触发页面更新

所以vue js 提供了Vue.set(app.list,1,{n:33})的数组数据更新方法。

相关推荐:

vue组件中v for指令介绍及使用v-for出现告警问题解析

Vue.js常用指令之循环使用v-for指令教程

vue.js指令v-for使用及索引获取

以上是实例讲解vue v-for 数据处理的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!