码迷,mamicode.com
首页 > 移动开发 > 详细

uniapp计算属性的使用

时间:2020-04-03 12:01:30      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:超出   ppp   写法   使用场景   计算属性   输入数据   isnan   val   对象   

计算属性,也可称为动态属性,在uniappp中有两种写法:

第一种:直接返回一个计算的值,该计算属性为函数类型

        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计算属性的使用

标签:超出   ppp   写法   使用场景   计算属性   输入数据   isnan   val   对象   

原文地址:https://www.cnblogs.com/nanyang520/p/12625402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!