vue中如何格式化输入时input框中v-model的内容?

我想在输入时,边输入边格式化input中的内容,如,输入银行卡号,自动四个数字空一个空格,方法本来已经实现了,监听input时间时进行格式化,但是这样的化传递给后台的数据就变成了带空格的数据,我只想改变显示内容,实际保存的不变,应该怎么办? 看了网上的filter方法,发现放在v-model里面会报错,也是了computer方法,也没起作用。

<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)
    },

尝试的computer方法:

  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 ')
      }
    }
  }
阅读 27.1k
3 个回答

v-model是语法糖,本质是 v-bind 和 v-on的组合。想要实现显示和提交内容分离的话不能直接用v-model绑定的变量,其实也就是v-on 绑定的变量。这是由input标签特性所决定的:所见即所得!value的值即显示的值,显示的值即value的值。

解决方案:
1.后台处理提交数据,去空格
2.前端处理

附2.代码:

<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:'#app',
        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>

参考链接
vue.js-表单输入绑定
vue.sync 与 v-model

写在watch里,改变自己。

推荐问题
宣传栏