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计算属性的使用的更多相关文章
- Vue - 在v-repeat中使用计算属性
1.从后端获取JSON数据集合后,对单条数据应用计算属性,在Vue.js 0.12版本之前可以在v-repeat所在元素上使用v-component指令 在Vue.js 0.12版本之后使用自定义元素 ...
- Vue之计算属性
上一篇里演示了计算属性的优点,但是,computed和data里的属性还是有区别的,computed的一个弱点就在于依赖于data属性的更新,才能触发视图更新. 举个例子: 上个例子中谈到用v-for ...
- 关于vue.js的计算属性练习代码
参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...
- Vue 过滤器与计算属性
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...
- 第三节:Vue计算属性
计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...
- Vue#计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需要多于一 ...
- Vue.js基本规则提炼总结及计算属性学习
Vue.js基本须知: 1)以“{{}}”格式 “Mustache” 语法(双大括号)来绑定表达式输出文本值; 2)以“{{{}}}”格式绑定原始的html,绑定的表达式内为字符串格式的html内容, ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- Swift面向对象基础(中)——Swift中的存储属性和计算属性
学习来自<极客学院> 1.存储属性:存储在类.结构体里的变量或者常量 2.分为:实例存储属性.类型存储属性 3.所有的存储属性必须显示的指定初始值,在定义时或者构造器当中指定 4.可选类型 ...
随机推荐
- ceph-fuse卡顿无法写入的问题
问题 ceph fuse closing stale session while still operable (Oliver Dzombic) 问题原文: Hi, i am testing on c ...
- xpth定位元素
- Vue 组件化开发
组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...
- 08 . Vue脚手架安装,使用,自定义配置和Element-UI导入使用
Vue脚手架 Vue脚手架可以快速生成Vue项目基础的架构. 安装3.x版本的Vue脚手架 /* npm install -g @vue/cli@3.3 */ 基于3.3版本的脚手架命令创建Vue项目 ...
- Python学习第三天 --- 分支、循环、条件、枚举
1.表达式: 表达式(Expression)是运算符(operator)和操作数(operand)所构成的序列. 2.表达式的优先级: 3.python的注释: #单行注释 ''' 多行注释 ''' ...
- 面试官:就问个Spring容器初始化和Bean对象的创建,你讲一小时了
前言 spring作为一个容器,可以管理对象的生命周期.对象与对象之间的依赖关系.可以通过配置文件,来定义对象,以及设置其与其他对象的依赖关系. main测试类 public static void ...
- 「LOJ 6287」诗歌
题面 LOJ 6287 Solution 枚举中间点\(j\),题目即求是否存在\(m\)使\(a[j]-m\)与\(a[j]+m\)分别在\(j\)两侧. 对于\(j\)左侧任意一个点\(i\),都 ...
- mq中nio
MappedFile#appendMessagesInner
- 六. Vue CLI详解
1. Vue CLI理解 1.1 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI,如果你在开发大型项目那么你需要它, 并且必然需要使用Vue CLI. 使 ...
- Error:Execution failed for task ':app:compileDebugAidl'. > java.lang.IllegalStateException: aidl is missing from '/Users/renguodong/Library/Android/sdk/build-tools/26.0.2/aidl'
错误信息:Error:Execution failed for task ':app:compileDebugAidl'. > java.lang.IllegalStateException: ...