Vue.js 在change事件中获取旧值

在本文中，我们将介绍在Vue.js中如何在change事件中获取旧值。在Vue.js中，change事件通常用于监测输入框、下拉框等表单元素的值的变化。我们经常需要知道用户改变之前的旧值，以便做相应的处理。

监听改变事件

要获取输入框的旧值，我们需要先监听该输入框的change事件。Vue.js提供了多种方法来监听元素的改变，可以通过v-model、@change、watch等方式来实现。在本文中，我们以v-model方式为例。

Vue.js中的v-model是一个双向绑定指令，它可以同时实现对数据的监听和更新。在输入框的v-model中绑定一个data中的值，当输入框的值发生变化时，会自动更新data中的值。

示例代码如下：

<template>
  <div>
    <input type="text" v-model="inputValue" @change="handleChange">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleChange(event) {
      console.log('旧值：', this.inputValue);
      console.log('新值：', event.target.value);
    }
  }
}
</script>

在上述代码中，我们定义了一个data属性inputValue，并在输入框的v-model中进行绑定。当输入框的值发生变化时，handleChange方法会被触发，我们可以在该方法中通过this.inputValue获取到旧值，通过event.target.value获取到新值。

使用watch监听数据变化

除了在change事件中获取旧值，我们还可以使用Vue.js的watch方法来监听data中的数据变化。watch方法可以观察指定的数据变化，并在数据发生变化时执行相应的逻辑。

示例代码如下：

<template>
  <div>
    <input type="text" v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  watch: {
    inputValue(newValue, oldValue) {
      console.log('旧值：', oldValue);
      console.log('新值：', newValue);
    }
  }
}
</script>

在上述代码中，我们定义了data属性inputValue，并使用watch方法监听该属性的变化。当inputValue的值发生变化时，watch方法会执行，并传入新值和旧值作为参数。

通过这种方式，我们同样可以在watch方法中获取到旧值和新值，并进行相应的处理。