v |
您所在的位置:网站首页 › v-for遍历二维数组 › v |
本文章采用 1.1版本的vue.js和 2.6版本的vue.js进行解决该问题 1.1版本的vue.js 1.1版本的vue.js不存在v-for循环空数组或空对象返回undefined的问题且该版本的vue.js还可以使用$index,$keyHTML代码 {{item}}{{$index}}JavaScript代码 new Vue({ el: '#box', data: { myData: [ 'apple', 'banana', 'orange' ] } })运行结果图 数据数组为空时,运行结果 什么都没有,即 1.1版本的vue.js根本不存在v-for循环空数组或空对象返回undefined的问题 2.6版本的vue.js 2.6版本的vue.js存在v-for循环空数组或空对象时,返回undefined的问题且该版本不能使用$index, $key($key返回对象的属性名)HTML代码 // 1.1版本的vue.js也可以使用这种方法循环访问索引、属性名 {{item}}-{{key}}-{{index}}JavaScript代码 new Vue({ el: '#box', data: { myData: { name:'blue', age:22 } } })运行结果图 数据对象为空时,运行结果 虽然返回undefined,但是并没有渲染上去,下面这种情况就渲染上去了 HTML代码 用户信息表 序号 名字 年龄 操作 {{index + 1}} {{item.name}} {{item.age}} 删除 删除全部 暂无数据...JavaScript代码 window.onload = function () { new Vue({ el: '#box', data: { name: '', age: '', myData: [] } }) }运行结果图 其解决方法是如下 在循环体中添加v-if 且 在v-for外层套上div 运行结果如下: 虽然不知道这是什么原理,但是总结起来就是: 1.1版本的vue.js可以使用$index,$key,2.6版本的不可以1.1版本的vue.js,v-for循环空数组或空对象,不会返回undefined,2.6版本的会返回2.6版本的返回的undefined会不会渲染到页面上,可能跟Bootstrap,jquery有关,解决办法就是加v-if 且 在v-for上外套div,但是该方法不可取,一旦数组或对象不再为空,就不能遍历该数组或对象了,应该是采取computed计算属性和数组的filter方法来解决。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |