用户输入数字时，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>