计算属性,也可称为动态属性,在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计算属性的使用的更多相关文章

  1. Vue - 在v-repeat中使用计算属性

    1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...

  2. Vue之计算属性

    上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...

  3. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  4. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  5. 第三节:Vue计算属性

    计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...

  6. Vue#计算属性

    在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...

  7. Vue.js基本规则提炼总结及计算属性学习

    Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...

  8. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  9. Swift面向对象基础(中)——Swift中的存储属性和计算属性

    学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...

随机推荐

  1. ACCESS渗透测试

    access-getshell 直接写shell # 创建临时表 create table test(a varchar(255)); # 插入一句话木马 insert into test(a) va ...

  2. nginx的403权限问题

    修改访问目录的权限为755 找到Nginx的配置文件nginx.conf,做如下改变: (1)将user nobody; 改为user root; (2)找到 autoindex  off 更改为on ...

  3. 面试阿里,首先要掌握的 Java 泛型,帮你一次性搞懂!

    引言 泛型是Java中一个非常重要的知识点,在Java集合类框架中泛型被广泛应用.本文我们将从零开始来看一下Java泛型的设计,将会涉及到通配符处理,以及让人苦恼的类型擦除. 泛型基础 泛型类 我们首 ...

  4. Pinpoint 设置微信或者钉钉预警

    本文基于 Pinpoint 2.1.0 版本 本文大部分内容来自:侠梦的开发笔记 ,但是原文的版本和我的不一致,放在2.1.0是跑不起来的,但是大概逻辑和思路基本一致. 目录 一.接入预警大概思路 二 ...

  5. IDM下载器的自定义设置

    IDM(Internet Download Manager)下载器主窗口的左侧是下载类别的分类,提供了分类功能来组织和管理文件.如果不需要它,可以删除"分类"窗口,并且在下载文件时 ...

  6. go学习路线资料

    编辑器 JetBrains公司出品的,goland go初步学习路线 Go 指南 如何使用Go编程 实效Go编程 Go by Example 中文版 参考: Go 语言学习资料与社区索引 Go入门指南 ...

  7. 3. git命令行操作之远程库操作

    3.1 基本操作 注册GitHub账号 在本地创建一个本地库并初始化 登录到gitHub创建一个远程库 注意:windows的凭据管理器中会保存github登录信息.如果要切换登录者,先删除相应凭据 ...

  8. JavaSE 学习笔记01丨开发前言与环境搭建、基础语法

    本蒟蒻学习过C/C++的语法,故在学习Java的过程中,会关注于C++与Java的区别.开发前言部分,看了苏星河教程中的操作步骤.而后,主要阅读了<Java核心技术 卷1 基础知识>(第8 ...

  9. 下载配置VNC

    VNC通常使用连接图形化系统电脑可以安装了Gnome或者KDE yum autoremo ve tigervnc-server //移除 vncreboot //重启yum install tiger ...

  10. windowsAPI函数操作注册表实现软件开机自启

    注册表的结构 注册表是一个数据库,它的结构同逻辑磁盘类似.注册表包含键(Key),它类似磁盘中的目录,注册表还包含键值(Value),它类似磁盘中的文件.一个键可以包含多个子健和键值,其中键值用于存储 ...