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

Question

看到这个 题目，但是这是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>

原文由 Morteza Negahi 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Roy J 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Jonathan Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议