vue input 修改前後值

Vue 是一款流行的 JavaScript 框架， 它可以輕鬆建立響應式的元件。在 WEB 開發中， 元件中的輸入框是非常常見的元素之一。在許多場景中，開發人員需要追蹤輸入框的值並對其進行處理。在本篇文章中，我們將討論 Vue 中如何處理輸入框的修改前後值。

監聽輸入框

Vue 提供了多種方式來監聽輸入框的值。其中最常見的方式是使用 v-model 。 v-model 指令實現了雙向綁定， 這表示輸入框的修改將反映在元件實例中的資料屬性上， 並且當資料屬性的值改變時， 輸入框中也會自動更新對應的值。

以下是一個簡單的例子，示範如何使用v-model 監聽一個文字輸入框的值：

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  }
};
</script>

在上面的例子中， 我們使用v-model 綁定了一個文字輸入框，並在元件實例中維護了一個username 資料屬性。當使用者在輸入框中輸入值時， username 資料屬性將自動更新， 並且在模板中的差值表達式 {{ username }} 也會隨之更新。

記錄輸入框修改前後的值

在某些場景中，我們需要知道輸入框的修改前後的值。例如在表單中，我們希望能夠追蹤使用者所做的更改， 並將這些更改儲存到一個 changes 陣列中以備後續使用。

在 Vue 中，我們可以使用 watch 來監控資料屬性的變化。當資料屬性的值改變時，我們可以使用 handler 函數來執行一些操作。

我們可以使用以下程式碼來記錄單一輸入框的修改前後值：

<template>
  <div>
    <label for="username">用户名:</label>
    <input id="username" v-model="username">
    <p>用户名: {{ username }}</p>
    <pre v-text="JSON.stringify(changes)">