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 您的变量，并在监视函数中计算重新格式化的版本，然后使用 nextTick 将其设置回您的变量（因此在监视完成之前它不会发生变化）。

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

对于正在寻找为多个字段做掩码的人来说，使用 watch 有点痛苦，所以我们可以使用 v-money (docs included). And check the demo here.

Answer 3

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

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

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

Answer 4

如果您使用的是 Vuetify，一个名为 'vuetify-money' has been published. Super easy to use for money value inputs, it is a text field that will add commas as you type. Here's a demo.

的新 light-weight 库

您在 v-text-field 上使用的所有属性也可以使用，因此很容易定制。

第 1 步

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 值完美无缺。它还会阻止任何 non-number 输入，因此您几乎不需要 front-end 验证检查，不包括自定义案例。

Answer 5

我将 Inputmask 与 vanilla 一起用于 vue 2，它运行良好。 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, ",") : 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>

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

Can Vue.js add commas while user typing numbers?

javascript

jquery

vue.js

laravel-5

vue-component