v

您所在的位置：网站首页 › vue循环遍历数组 › v

v

2023-08-12 09:02| 来源: 网络整理| 查看: 265

本文章采用 1.1版本的vue.js和 2.6版本的vue.js进行解决该问题

1.1版本的vue.js 1.1版本的vue.js不存在v-for循环空数组或空对象返回undefined的问题且该版本的vue.js还可以使用$index,$key

HTML代码

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方法来解决。

【本文地址】

v

v

今日新闻

推荐新闻