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

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進行了綁定