小程序 监听 data 数据

小程序 监听 data 数据

组件中监听

// 这是一个步骤展示的组件，已完成的done,正在做的doing,以及将要做的‘’
// 根据不同的状态展示不同的样式
Component({
  options: {
    addGlobalClass: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    stepNum: Number
  },

  observers: {
    'stepNum': function (stepNum) {
      let step1 = ''
      let step2 = ''
      let step3 = ''
      let step4 = ''
      if (stepNum === 1) {
        step1 = 'doing'
      } else if (stepNum === 2) {
        step2 = 'doing'
        step1 = 'done'
      } else if (stepNum === 3) {
        step3 = 'doing'
        step2 = 'done'
        step1 = 'done'
      } else if (stepNum === 4) {
        step4 = 'doing'
        step3 = 'done'
        step2 = 'done'
        step1 = 'done'
      }
      this.setData({
        step1: step1,
        step2: step2,
        step3: step3,
        step4: step4
      })
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    step1: '',
    step2: '',
    step3: '',
    step4: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

普通页面中监听

// 监听 zhengPhoto 是否有身份证正面照片
watchZhengPhoto () {
    let val = ''
    let _this = this
    Object.defineProperty(this.data, 'zhengPhoto', {
      set (newVal) {
        if (newVal) {
          _this.setData({
            'userMsg.form': {
              name: '刘平安',
              cardNo: '32088****87555'
            }
          })
        } else {
          _this.setData({
            'userMsg.form': {
              name: '',
              cardNo: ''
            }
          })
        }
        val = newVal
      },
      get () {
        return val
      }
    })
  },
onLoad: function() {
  this.watchZhengPhoto ()
}