zoukankan      html  css  js  c++  java
  • 小程序observer函数的应用

    需求是这样的 就是构建月份的组件中,月份小于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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    协同过滤算法
    redis雪崩,击穿,穿透
    scentos7安装redis,以及redis的主从配置
    centos7安装python3
    vm虚拟机安装centos7。克隆镜像以及快照
    全文检索django-haystack+jieba+whoosh
    drf的权限扩充
    redis分布式锁解决超卖问题
    Django结合Websocket进行WebSSH的实现
    vue-父子组件传参以及无限级评论
  • 原文地址:https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10207046.html
Copyright © 2011-2022 走看看