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("超出滿分值");
                }
            }