vue中如何實時修改輸入的值

經常看到需要對用戶輸入的值進行實時修改，有時是需要修改為指定的展示內容，有時候是用來校驗，禁止用戶輸入非法數據，總之是一個常見的需求吧，只是自己一直沒有特意去關注。思來想去還是有必要了解一下。

操作方法

一直聽說各種方式，記得最深的便是利用computed的計算屬性，通過set 和 get 來進行修改，其他的也有所見聞。先實現一種，再進行其他其他深究，以及使用好壞。

vue文檔說明 對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。

需要分兩種形式，一種是原生，一種是基於組件，假設需求為輸入數字，同時四位一個空格，類似輸入銀行卡號

• 原生

使用 v-model 進行數據綁定

// template
<input v-model="value" type="text" @input="setValue($event.target)">
// js
data () {
    return {
        value: ''
    }
}

setValue (target) {
    // 輸入的數據進行初始化，將非數字的替換為空
    const val = target.value.toString().replace(/[^0-9]/ig,"")
    // 重新賦值
    this.value = v.replace(/(\d{4})(?=\d)/g, '$1 ')
}

不適用 v-model 進行數據綁定

// template
<input type="text" @input=""></input>
// js
data () {
    return {
        form {
            accout: ''
        }
    }
}
setValueNotWidthVModel (target) {
    const v = target.value.toString().replace(/[^0-9]/ig,"")
    // 此處是獲取數據的地方
    this.form.accout = v.replace(/\s/g, '')
    // 此處是頁面進行顯示
    target.value = v.replace(/(\d{4})(?=\d)/g, '$1 ')
}

• 組件方式
  組件都是對原始input進行額外處理了一層

<!-- template -->
// element-ui
<el-input v-model="form.accout" @input="changeInputValue"></el-input>
// iview
<Input v-model="form.accout" @input="changeInputValue" />
<!-- js -->
data () {
    return {
        form: {
            account: '0'
        }
    }
}
// 由於是組件，返回值 v 直接是value ，無法傳參，或者`$event`
changeInputValue (v) {
    const v = val.toString().replace(/[^0-9]/ig,"")
    // 需要延遲一下，對值進行設置 
    // https://github.com/ElemeFE/element/blob/dev/packages/input/src/input.vue 可以看到設置原始值時，使用 this.$nextTick()
    this.$nextTick(() => {
        // https://segmentfault.com/q/1010000009840451/a-1020000010449110
        this.form.accout = v.replace(/(\d{4})(?=\d)/g, '$1 ')
    })
}

總結

• 依舊不知道使用computed是如何實現的，上述方法，通過input時間，便可以一直拿到值，不用額外進行處理，因為v-model進行了綁定

2019-09-10

無意間看到vue-admin-element作者的掘金文章,參考之下，完成了computed進行修改輸入的參數

code

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

// js
data () {
    return {
        form: {
            computeValue: ''
        }
    }
}
computed: {
    computeValue: {
      get () {
        return this.form.computeValue
      },
      set (val) {
        this.form.computeValue = val.replace(/[9]/g, 'a')
      }
    }
}

效果圖