时间戳

首页 > 解决方案 > 如何允许一个点 '.' 在 vue.js 输入字段中

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

问题描述

这里我在 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>

标签： vue.js

解决方案

您正在替换所有非数字字符，因此请排除在外.。您可以使用否定字符类。

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

更新：在另一个替换中，您必须排除小数部分的逗号，因为您可以使用否定的后视断言。

.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);
    }
  }

推荐阅读