1.监听下拉窗数据

templat创建输入框

<el-form-item
                      :label="$t('orderCen.common.operatorSign')"
                      prop="operator"
                    >
                      <el-select
                        v-model="conditionForm.operator"
                        :placeholder="$t('orderCen.common.pleaseChoose')"
                      >
                        <el-option
                          v-for="item in options.symbol"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>

script的watch中实现输入框监听

watch: {
    'conditionForm.operator': {
      deep: true,
//newVal是检查你输入的新值，oldVal是检查你输入的老值
      handler(newVal, oldVal) {
        if (newVal === '5' || newVal === '6') {
          this.dishow = false
          this.rules.value = []
          this.conditionForm.value = ''
        } else {
          this.dishow = true
          this.rules.value = [
            ruler.required(this.$t('orderCenMsg.valueIsNull'), 'change'),
            ruler.commonWord(this.$t('orderCenMsg.conditionValueDataError'))
          ]
        }
      }
    }
  },

2.watch 监听对象几种方式

第一种：

使用 Vue 中的 watch 方法监听对象，设置 deep:true 可以进行深度监听，当对象中的属性发生变化时，会调用 handler 方法。

handler 会有两个参数第一个参数是新值，第二个参数是老值。

<template>
    <div>
        <input v-model="test.text">
    </div>
</template>
   
<script>
export default {
    data () {
        return {
            test: {
                text: ''
            }
        }
    },
   
    watch:{
        test: {
            deep: true,
            handler: function (newVal,oldVal){
                console.log('newValue', newVal);
                console.log('oldValue', oldVal.text);
            }
        }
    }
}
</script>

第二种：

如果需要只监听对象中某一属性的变化，watch 也能实现，另外也可以结合使用计算属性 computed 来对此进行监听。

<script>
export default {
    data () {
        return {
            test: {
                text1: '',
                text2: ''
            }
        }
    },
     
    watch:{
        'test.text1': {
            deep: true,
            handler: function (newVal,oldVal){
                // code
            }
        }
    }
}
</script>
第三种：
 以下是结合计算属性对某一对象的单一属性实现监听的方法：
<script>
export default {
    data () {
        return {
            test: {
                text1: '',
                text2: ''
            }
        }
    },
    computed:{
        testText1 () {
            return this.test.text1
        }
    },
    watch:{
        testText1: {
            dosomething (newVal,oldVal){
                // code
            }
        }
    }
}
</script>

3.style中布局（省略代码）

……

`````````````````````````````````````````````````````````````````````````````````````````````

vue页面的构成:

一个vue页面主要包括3个部分：

1.<template>界面展示代码</template>

2.<script>业务实现代码</script>

3.<style>界面布局代码</style>

重点部分是业务实现<script>包含的部分：

<script>
export default {
  name: "Home",
  data() {//数据定义
    return {};
  },
  methods: {
    // 组件的方法
  },
  watch: {
    // watch监听方法，擅长处理的场景：一个数据影响多个数据
  },
  computed: {
    // computed擅长处理的场景：一个数据受多个数据影响
  },
  beforeCreate: function() {
    // 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
  },
  created: function() {
    // 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  },
  beforeMount: function() {
    // 在挂载开始之前被调用：相关的 render 函数首次被调用。
  },
  mounted: function() {
    // 编译好的HTML挂载到页面完成后执行的事件钩子
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
    // 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
    console.log("Home done");
  },
  beforeUpdate: function() {
    // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  },
  updated: function() {
    // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
    // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
    // 该钩子在服务器端渲染期间不被调用。
  },
  beforeDestroy: function() {
    // 实例销毁之前调用。在这一步，实例仍然完全可用。
  },
  destroyed: function() {
    // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
  }
};
</script>