时间戳

首页 > 解决方案 > Vue 货币输入屏蔽

vue.js - Vue 货币输入屏蔽

问题描述

我正在使用 Vue2，但遇到以下问题：

在我的订单系统中，有一个名为 value 的输入。在这里，客户输入他所下订单的总价值。因此，用户输入 9940，输入应显示 99,40。

这是我的价值输入：

            <div class="col-md-6">
                <label for="valor">Valor</label>
                <input @keydown="maskValor" class="form-control" type="number" name="valor" id="valor" placeholder="Valor" v-model="newOS.valor" ref="inputValor">
            </div>

如您所见，我遇到的问题是我无法更改实际的 newOS.valor （这是我试图掩盖的值），因为它们是在整个系统中以美分计算的。

理想情况下，输入标签会以显示值 0,00（以及 newOS.valor 为 0）开始，当用户输入一个数字时，它会被添加到值的后面：

Starts at 0,00
User inputs 4
New value: 0,04
User inputs 5
New value: 0,45
User inputs 1
New value: 4,51
User inputs 000
New value: 4.510,00

依此类推，但 newOS.valor 仍然是 451000，而不是 4.510,00。如果有人能指出我正确的方向，我将非常感激，因为我对此很陌生，并且对从哪里开始感到非常迷茫。我知道我可以使用正则表达式来屏蔽输入，但是如果我在 newOS.valor 本身上执行 replace()，它会破坏系统的其余部分。

提前致谢！

标签： vue.jsinputvuejs2

解决方案

多么棒的问题。因此，您遇到的问题是绑定到输入将始终将输入值绑定到该属性。我的第一个想法是你可以使用计算值，但你很快就会遇到同样的问题。

但是计算属性有一个较少使用的方面，即计算的 getter 和 setter — <a href="https://vuejs.org/v2/guide/computed.html#Computed-Setter" rel="nofollow noreferrer" >https://vuejs.org/v2/guide/computed.html#Computed-Setter

这可能正是你所追求的。

var v = new Vue({
  el: "#app",
  data() {
    return {
      // This is the value that we use in our app, but not our display:
      val: 0,
    };
  },
  computed: {
    value: {
      // Assuming you are in the same country as toLocalString(), this should work:
      get: function () {
        return (this.val/100).toLocaleString().padStart(4, "0.00")
      },
      // setter
      set: function (newValue) {
        // This is a cheeky regex, that can remove any non-digit character:
        newValue = parseInt(newValue.replace(/\D+/g, ''));
        // Handle edge cases
        if(isNaN(newValue)){
          newValue = 0; 
        }
        this.val = newValue;
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <!-- Bind to copmuted property "value" -->
  <input type="text" v-model="value" />
  <code v-text="val"></code>
</div>

我相信你可以编写一个更好的数字解析表达式，但我想我只是做基础，这样你就可以看到如何来回转换输入。

推荐阅读