• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序observer函数的应用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

需求是这样的 就是构建月份的组件中,月份小于10月的时候 显示的数字都是一个位数,需要转换成两位数,

比如8月份是8 ,那就要转换为08 ,同理可得 其他低于十月份的月份也是要这样做:

打开组件的js文件

接下来看下代码:

properties: {
//月份的值
index:{
type:String,
//不能在observer函数中去改变值,容易出现无限加载死循环!
observer:function(newVal,oldVal,changedPath){
let val = newVal < 10 ? '0'+newVal :newVal;//判断值如果是个位数前面补0 否则输出原来的值
//更新数据
this.setData({
// index:val,val赋值 但是会导致递归加载 内存耗尽,所以在data中改变值
num: val
})
}
},
}
这个函数的意义在于,当我们改变值的时候,微信小程序会主动调用这个函数,往这个函数传值,也就是这三个参数:

newVal,oldVal,changedPath  代码的讲解都在注释中。

需要注意的是,我们通过判断月份的值选择加0,并赋值到一个变量中,再把这个变量赋值到渲染到页面的变量时候,

 

不能和properties下的对象名字相同,为什么?因为不能在observer函数中去改变属性值,会出现无限递归的现象,也就是死循环

在该文件的data部分增加一个值:num

data: {

num: '',//不能和上面的index相同,所以重新命名

}
 

选择重命名变量的下划线的写法!num: val  来区分开来

而且,index值的数据类型必须是字符串类型,为什么?因为如果是数字类型Number的话,代码会判断你是数字,就不会在数字前显示出0,会将0去掉,即使你做的判断没有问题!

完成这些代码,最后一步,就是把组件的页面的渲染值改掉 index改成 num

<text class="index">{{ num }}</text>
 
---------------------
作者:那颗星好美
来源:CSDN
原文:https://blog.csdn.net/qq_42767631/article/details/84949381
版权声明:本文为博主原创文章,转载请附上博文链接!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序笔记发布时间:2022-07-18
下一篇:
判断请求是浏览器发出还是小程序发出发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap