让人恶心的uniapp输入框

问题代码

<template>
  <div>
    <label>请输入京东E券号码：</label>
    <input  v-model="code" @input="onInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: ''
    }
  },
  methods: {
    onInput(event) {
      let value = event.target.value.replace(/[^a-zA-Z0-9]/g, '')
      let formattedValue = ''
      for (let i = 0; i < value.length; i++) {
        if (i % 4 === 0 && i > 0) {
          formattedValue += '-'
        }
        formattedValue += value.charAt(i)
      }
	  this.code = formattedValue
    }
  }
}
</script>

<style>
input {
  border: none;
  outline: none;
}
</style>

改进代码

<template>
  <div>
    <label>请输入京东E券号码：</label>
    <input  v-model="code" @input="onInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: ''
    }
  },
  methods: {
    onInput(event) {
      let value = event.target.value.replace(/[^a-zA-Z0-9]/g, '')
      let formattedValue = ''
      for (let i = 0; i < value.length; i++) {
        if (i % 4 === 0 && i > 0) {
          formattedValue += '-'
        }
        formattedValue += value.charAt(i)
      }
      // 等此次键入更新后再次更新值
	  this.$nextTick(()=>{
		   this.code = formattedValue
	  })
     
    }
  }
}
</script>

<style>
input {
  border: none;
  outline: none;
}
</style>

参考：(40条消息) vue.nextTick()方法的使用详解（简单明了）_广积粮缓称王的博客-CSDN博客