Vue.js 可以在用户输入数字时添加逗号吗？

Question

我看到了topic，但这是 Jquery，我怎样才能将其更改为 Vue.js ？ Vue.js 支持 v-on 吗？我的错在哪里？

<div id="vue">
    <input v-model="amountModel" v-on:keyup="AddCammas()" value="{{price}}">
</div>

<script>
   el: #vue,
   methods:{
      AddCammas : funtion(){
          if(event.which >= 37 && event.which <= 40) return;

          $(this).val(function(index, value) {
             this.message = this.amountModel
                .replace(/\D/g, "")
                .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
           });
      } 
   }   
</script>

Answer 1

你根本不需要 jQuery。你 watch 你的变量，在 watch 函数中，计算重新格式化的版本，然后使用 nextTick 将它设置回你的变量（所以在 watch 完成之前它不会发生变异）。

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 src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div id="vue">
  <input type="text" v-model="price" />{{price}}
</div>

Answer 2

如果您使用的是 Vuetify，一个名为“vuetify-money”的新轻量级库已经发布。超级容易用于货币价值输入，它是一个在您输入时会添加逗号的文本字段。这是demo.

您在 v-text-field 上使用的所有属性也可以使用，因此可以轻松自定义。

第一步

npm install vuetify-money --save

第 2 步

创建一个 src/plugins/vuetify-money.js 文件，内容如下：

import Vue from "vue";
import VuetifyMoney from "vuetify-money";
Vue.use(VuetifyMoney);
export default VuetifyMoney;

第 3 步

将文件添加到 src/main.js ：

import "./plugins/vuetify-money.js";

（main.js 是你通常放这个的文件）

new Vue({render: h => h(App)
}).$mount('#app');

第 4 步 在您的代码中使用它！

<template>
  <div>
    <vuetify-money
      v-model="value"
      v-bind:options="options"
    />
    Parent v-model: {{ value }}
  </div>
</template>
<script>
export default {
  data: () => ({
    value: "1234567.89",
    options: {
      locale: "ja-JP",
      prefix: "$",
      suffix: "",
      length: 10,
      precision: 2
    }
  })
};
</script>

您现在有一个文本字段，可以在您键入时添加逗号，同时保持 v-model 值完美无缺。它还可以防止任何非数字输入，因此您几乎不需要前端验证检查，自定义案例除外。

Answer 3

对于正在寻找为多个字段做掩码的人来说，使用watch 有点痛苦，所以我们可以使用v-money（包括文档）。并查看演示here。

Answer 4

如果你想使用你的方法，你可以像这样制作你的 AddCammas 方法：

AddCammas: function(event) {
  event.target.value = event.target.value.replace(",", ".");
}

关于 VueJS 中的事件监听器有一点需要了解。您可以在处理程序中访问事件对象，但为此，您需要使用此语法v-on:keyup="AddCammas"（无括号）或此语法v-on:keyup="AddCammas($event)"（当您有多个参数时很有用）

Answer 5

我在 vue 2 中使用了带有 vanilla 的 Inputmask，它运行良好。 Inputmask

    <script src="../src/assets/js/libs/jquery-inputmask/inputmask.min.js"></script>
  <script src="../src/assets/js/libs/jquery-nputmask/bindings/inputmask.binding.js">

<script>
  $(document).ready(function () {
    var selector = document.getElementById("txtOrderQty");
    var im = new Inputmask({ alias: "currency", digits: 0, allowMinus: false }
    im.mask(selector);
</script>

Answer 6

<template>
  <div class="form-group">
    <label :class="{required:$attrs.required}">{{ label }}</label>
    <input v-model="model" class="form-control" :class="{invalid : error}" type="text" pattern="\d+((\.|,)\d+)?"
           v-bind="$attrs">
    <div v-if="error" class="invalid-tooltip">{{ error[0] }}</div>
  </div>
</template>

<script>
export default {
  name: "InputNumber",
  emits: ['update:modelValue'],
  inheritAttrs: false,
  props: {modelValue: '', error: '', label: ''},
  computed: {
    model: {
      get() {
        // return this.modelValue ? this.modelValue.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,") : this.modelValue
        return this.modelValue ? this.modelValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', Number(value.replaceAll(',','')))
      }
    },
  }
}
</script>