vue.js - 如何在 vue.js 输入字段中允许点 '.'

Question

这里我用vue.js写了一段代码。此代码用于当用户在价格字段中输入数字时然后在三位逗号“,”之后会动态提示。所以这个功能是预期的并且它工作正常但问题是当我们尝试输入一个点'。'手动不允许我们输入点。所以在这个脚本中我想允许用户输入一个点'。'手动。所以请帮我解决这个问题。

<div id="vue">
  <input type="text" v-model="price" />
</div>

<script>
new Vue({
  el: '#vue',
  data: {
    price: 0
  },
  watch: {
    price: function(newValue) {
      const result = newValue.replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      Vue.nextTick(() => this.price = result);
    }
  }
});
</script>

Answer 1

您要替换所有非数字字符，因此从中排除 .。您可以使用 negated character class .

newValue.replace(/[^.\d]/g, "")

最终代码:

  watch: {
    price: function(newValue) {
      const result = newValue.replace(/[^.\d]/g, "")
        .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      Vue.nextTick(() => this.price = result);
    }
  }

---

更新: 在另一个替换中，您必须排除小数部分的逗号，因为您可以使用 negative look-behind assertion .

.replace(/\B(?<!\.\d+)(?=(\d{3})+(?!\d))/g, ",");

最终代码:

  watch: {
    price: function(newValue) {
      const result = newValue.replace(/[^.\d]/g, "")
        .replace(/\B(?<!\.\d+)(?=(\d{3})+(?!\d))/g, ",");
      Vue.nextTick(() => this.price = result);
    }
  }