目录格式化数据后切换页面出现NaN目的问题原因解决方案数字运算有时候会出现NAN的情况具体给出解决办法格式化数据后切换页面出现NaN 目的 在一个Vue项目中，需要对返回数据的时间戳
在一个Vue项目中，需要对返回数据的时间戳进行格式化，数据格式如下
res = [ { "program_id": 6, "code": 1005,"create_time": 1627022366,
"child": [ { "program_id": 7, "code": 1006, "create_time": 1627022366,} ] } ]利用递归进行格式化，在computed中执行，第一次显示没有问题，但切换页面后，时间显示变成一行NaN
fORMatProjectList (list) {
let projectList = list.map((item) => {
// formatTime是格式化函数，返回'Y-m-d H:i:s'格式的字符串
item.create_time = formatTime(new Date( item.create_time * 1000 ), 'Y-m-d H:i:s')
if (item.child) { this.formatProjectList (item.child) }
return item
})
return projectList
},在map函数中，item.create_time 直接修改了源数据res，res是已格式完成的字符串
切换页面会重新触发computed，此时再执行格式化会将字符串传给formatTime格式化函数，formatTime接收了字符串会返回NaN
将源数据res进行深拷贝，再执行该函数
computed: {
projectList () {
// deepClone 是深拷贝函数
let newList = deepClone(res.data.list)
let formatList = this.formatProjectList(newList)
return formatList
}
}vue的html中，经常会出现，需要对获取的数据进行加减乘除运算的情况，如果在表达式中进行运算
例：{{ a + b + c }}
这种会导致，你在获取数据的时候，值还没取到，dom刚开始渲染，所以a，b，c的值做运算，会显示NAN，等到数据获取结束，才会显示运算结果，对于这种短暂的NAN的闪现，往往会影响用户体验
一种是加loading，通过loading来覆盖NAN，另一种是在Http请求的结果response.data中，直接赋值处理
如：
this.result = this.a + this.b + this.c注意：这里的result必须在data属性中定义，否则会报错。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: Vue格式化数据后切换页面出现NaN问题及解决
本文链接: https://lsjlt.com/news/150540.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0