How to format the contents of v-model in the input box when typing in vue?

I want to input while formatting the contents of input, for example, enter the bank card number, automatically four numbers space a space, the method has already been implemented, monitor input time for formatting, but this change to the background of the data into a space of data, I just want to change the display content, the actual preservation of the same, what should be done? After looking at the filter method on the Internet, I found that if I put it in v-model, I will report an error, and it is also the computer method, which doesn"t work.

<input name="bank_account" label="" placeholder=" " type="text" v-model="bank_account" @input="handleBankCardInput"  :maxlength="23" />
  handleBankCardInput(value) {
      this.bank_account = value.replace(/\s/g, "").replace(/(\d{4})(?=\d)/g, "$1 ")
      console.info(this.bank_account)
    },

attempted computer method:

  computed: {
    bank_account: {
      get() {
        return this.bank_account.replace(/\s/g, ""())
        // return this.bank_account.replace(/\s/g, ""())
      },
      set(val) {
        this.bank_account = val.replace(/\s/g, "").replace(/(\d{4})(?=\d)/g, "$1 ")
      }
    }
  }
Mar.11,2021

https://codepen.io/randyou/pe.


v-model is a grammatical sugar, which is essentially a combination of v-bind and v-on. If you want to achieve the separation of display and submission, you can't directly use v-model-bound variables, which are actually v-on-bound variables. This is determined by the input tag feature: WYSIWYG! The value of value is the value displayed, and the value displayed is the value of value.

solution:
1. Background processing of submitted data, go to the space
2. Front-end processing

attachment 2. Code:

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input @input="strFormat($event.target)">
</div>
</body>
</html>
<script>
    var app = new Vue({
        el:'-sharpapp',
        data: {
            account: 0,
        },
        methods:{
            strFormat:function (target) {
                this.account = target.value.toString().replace(/\s/g, '');
                target.value = target.value.toString().replace(/(\d{4})(?=\d)/g, '$1 ');
            }
        }

    })
</script>

reference link
ide/forms.html" rel=" nofollow noreferrer "> vue.js- form input binding
vue.sync and v-model


write in watch and change yourself.

Menu