用戶輸入數字時，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>