Question

我正在尝试在用户键入时以逗号分隔的方式显示输入数字。我正在使用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();
      }
    }
  })

如果我处理方法不正确，请通知我。

Answer 1

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

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

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

Answer 2

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

因此，您需要执行此操作，以使格式化程序使用当前代码。

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

如果您希望将v-model值输出为数字，则也不应使用v-model.number，而应使用number道具。（格式化程序仍然是字符串）

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

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

Answer 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>

b-form-input格式化程序未格式化数字

3 个答案: