操作方法

  • 使用 computed计算属性定义一个变量，用来返回多个 data 值
  • 使用 watch侦听属性控制变量，当变量发生改变时，执行函数，并加上 deep:true 的选项参数，用于发现对象内部值的变化

代码演示

使用场景，表单验证时，其中一个控件为空，则不允许点击提交按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
computed: {
  allFormParam() {
    const { value1, value2, value3 } = this;
    return {
      value1, value2, value3
    }
  }
}，
watch: {
  allFormParam: {
    handler(val) {
      let flag = false;
      for (const key in val) {
        if (val.hasOwnProperty(key) && val[key] !== '') {
          flag = true;
        }
      }
      this.formBtnDisabled = flag;
    },
    deep: true
  }
}