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)">

<script> export default { data() { return { username: "", changes: [] }; }, watch: { username(newVal, oldVal) { if (newVal !== oldVal) { this.changes.push({ before: oldVal, after: newVal }); } } } }; </script>

登入後複製

在上面的程式碼中， 我們透過新增一個changes 數組， 來記錄輸入框的每次修改。我們稍微修改了 watch 選項中的 handler 函數，現在它將在輸入框的值變化時觸發。當新值不等於舊值時， 我們將前一個值和後一個值以物件的形式存入 changes 陣列中。

記錄多個輸入框的值

在實際開發中， 我們通常需要監控多個輸入框的值。在這種情況下， 我們可以使用一個格式相同的物件來儲存所有的輸入框變更。對像中的屬性名稱是輸入框的 ID 或名稱，而屬性值是一個對象， 其中包含輸入框修改前後的值。

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

    <label for="email">邮箱:</label>
    <input id="email" v-model="formData.email">
    <p>邮箱: {{ formData.email }}</p>

    <pre v-text="JSON.stringify(changes)">

<script> export default { data() { return { formData: { username: "", email: "" }, changes: {} }; }, watch: { formData: { handler(newVal, oldVal) { // 遍历对象 formData for (const key in newVal) { // 如果 newValue 和 oldValue 不同 if (newVal[key] !== oldVal[key]) { // 新增一个属性，属性名为输入框的名称或 ID if (!this.changes[key]) { this.$set(this.changes, key, {}); } // 设置属性值， 属性值包含 before 和 after 两个字段 this.changes[key].before = oldVal[key]; this.changes[key].after = newVal[key]; } } }, // 深度监听对象中的属性，当数据属性的值发生改变时，handler 中 callBack 函数将被执行。 deep: true } } }; </script>

登入後複製