b-form-input 格式化程序不格式化数字答案

【问题标题】：b-form-input formatter not formatting numberb-form-input 格式化程序不格式化数字
【发布时间】：2020-11-01 13:52:24
【问题描述】：

我正在尝试在用户键入时以逗号分隔显示输入数字。我正在使用 bootstrap-vue 的 b-form-input。我相信格式化程序是正确的选择。当我使用格式化程序时，我没有看到预期的格式化结果。这是我的 jsfiddle https://jsfiddle.net/spike_wood/34wqme5n/9/

**作为澄清点，目的是将变量点保持为数字，以执行数学等。目标是在输入字段中以可读的方式显示非常大的数字。

<div id="app">
  <div>
    <b-form>
      <b-form-group
        label-for="totalPoints"
        description="Enter points."
      >
        <label for="totalPoints">Total Points</label>
        <b-input-group append="pts">
          <b-form-input
            style="width: 20%"
            id="totalPoints"
            v-model.number="points"
            placeholder="Enter your total points"
            :formatter="numberFormat"
          />
        </b-input-group>
      </b-form-group>
    </b-form>
    <h3>Unformatted Points: {{ points }}</h3>
    <h3>Formatted Points: {{ numberFormat(points) }}</h3>
  </div>
</div>

还有我的javascript：

  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        points: ''
      }
    },
    methods: {
        numberFormat(value) {
        return value === 0 ? '' : value.toLocaleString();
      }
    }
  })

如果我处理不正确，请告诉我。

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

你需要拆分字符串并用逗号将它们连接起来。

methods: {
    numberFormat(value) {
        return value.replace(/,/g, '').split('').join(',')
  }
}

但上述情况总是会在每个字符串后添加逗号，并且字符串中不接受逗号

【讨论】：

似乎使用 number 和 toLocaleString() 方法做同样的事情，虽然专注于数字而不是字符串。我错过了什么？

【解决方案2】：

这是因为发送到格式化程序函数的值将始终是一个字符串，但现在您正在检查一个数字。

因此，您需要这样做，以让您的格式化程序使用您当前的代码。

numberFormat(value) {
  return value === '0' ? '' : value.toLocaleString();
}

你也不应该使用v-model.number，而应该使用number prop，如果你想将 v-model 值输出为一个数字。（格式化程序仍然是一个字符串）

v-model 修饰符 .number 和 .trim 可能会在用户键入时导致意外的光标跳跃（这是自定义组件上 v-model 的 Vue 问题）。避免使用这些修饰符。请改用数字或修剪道具。

https://bootstrap-vue.org/docs/components/form-input#input-type（在输入类型的注意事项下）

【讨论】：

这是一个很好的观点，帮助我解决了当前的问题。 .toLocaleString() 仅适用于数字，格式化程序将值作为字符串传递。我正在寻找该字段的结果为数字（在变量点中），但显示为格式良好的字符串。

【解决方案3】：

根据我从 Hiws 的回答中学到的知识，我为该字段创建了一个显示字符串，以及一个用于捕获实际数字的变量。这使我可以在具有可读格式的同时对数字进行数学运算。

我的脚本现在如下所示。我还在 return 语句中使用了类型强制运算符，以便从输入字段中仅删除 0 个字符串

new Vue({
    el: '#app',
    data() {
      return {
        points: 0,
        displayPoints: ''
      }
    },
    methods: {
      numberFormat(value) {
        this.points = Number(value.replace(/\D/g, ''))
        return value == '0' ? '' : this.points.toLocaleString();
      }
    }
  })

我的 html 如下所示。我从输入中删除了所有数字转换，因为它不适合我插入的逗号。

<div id="app">
  <div>
    <b-form>
      <b-form-group
        label-for="totalPoints"
        description="Enter points."
      >
        <label for="totalPoints">Total Points</label>
        <b-input-group append="pts">
          <b-form-input
            style="width: 20%"
            id="totalPoints"
            v-model="displayPoints"
            placeholder="Enter your total points"
            :formatter="numberFormat"
          />
        </b-input-group>
      </b-form-group>
    </b-form>
    <h3>Unformatted Points: {{ points }}</h3>
    <h3>Formatted Points: {{ displayPoints }}</h3>
    <h3>Math on Points: {{ points + points }}</h3>
  </div>
</div>

【讨论】：