5

我看到this topic，但这是Jquery，如何将其更改为Vue.js？Vue.jsv-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>
4

6 回答 6

22

你根本不需要 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>

于 2016-09-28T00:38:51.287 回答
2

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

于 2018-07-12T17:54:35.170 回答
2

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

您在 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 值完美无缺。它还可以防止任何非数字输入，因此您几乎不需要前端验证检查，自定义案例除外。

于 2020-08-25T08:11:19.160 回答
0 

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

于 2021-09-17T20:59:47.973 回答
0

如果你想使用你的方法，你可以让你的AddCommas方法是这样的：

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

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

于 2020-01-19T15:30:37.287 回答
0

我将 Inputmask 与 vanilla 一起用于 vue 2，并且效果很好。 输入掩码

    <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>
于 2021-08-08T13:07:35.367 回答