上下观古今,起伏千万途。这篇文章主要讲述uniapp计算属性的使用相关的知识,希望能为你提供帮助。
计算属性,也可称为动态属性,在uniapp中有两种写法:
第一种:直接返回一个计算的值,该计算属性为函数类型
computed:{ kh_score(){ var list = this.taskList; var scNum = 0; for(var i in list){ for(var j in list[i].children){ var temp =list[i].children[j].target * 1; if(!isNaN(temp)){ scNum = scNum + temp; } } } scNum = scNum == 0 ? "" : scNum; return scNum; } }
在uniapp中,这类写法可能会出现报错(HBuilderX内置浏览器运行)
文章图片
当出现这种错误时,应该使用如下写法。
计算属性第二种写法:声明get和set方法,该计算属性为对象类型
computed:{ kh_score:{ get(){ var list = this.taskList; var scNum = 0; for(var i in list){ for(var j in list[i].children){ var temp =list[i].children[j].target * 1; if(!isNaN(temp)){ scNum = scNum + temp; } } } scNum = scNum == 0 ? "" : scNum; return scNum; }, set(v){} } }
使用场景中的小记:
计算属性中大多情况依赖于表单输入值去计算
限制表单输入数据合法值,防止键盘敲击过快:在input组件的@input方法里,使用定时器短时间再次更新值即可。
例如如下写法:
//校验平时分 checkRegularGrade(e){ var psc = e.detail.value * 1; if(isNaN(psc)){ _self.ps_score = ""; _self.$uniApi.tipMsg("不是数字"); }if(psc > 100){ _self.ps_score = 100; setTimeout(function(){_self.ps_score = 100; },100) _self.$uniApi.tipMsg("超出满分值"); } }
【uniapp计算属性的使用】
推荐阅读
- (开源)STC89c51基于SP8266制作环境实时检测系统+APP inventor制作手机App实时显示
- APP上架华为商店获取SHA256证书指纹
- 安卓 日常问题 工作日志7
- 安卓 日常问题 工作日志6
- Redis字符串操作命令详解
- Redis排序集合用法和命令详解
- Windows Redis安装详细步骤图解
- Redis集合用法和命令详解
- Redis安全操作实例图解