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将其设置回变量（因此在手表完成之前不会发生变异）。

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文本字段上使用的所有属性，因此很容易自定义。

第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值完全正确。它还可以防止任何非数字输入，因此除定制案例外，您几乎不需要进行前端验证检查。

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 中使用了 Inputmask 和 vanilla，它工作得很好。 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>

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

5 个答案: