JSFiddle - React, Tailwind, and code Playground

by imys

HTML

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <input-money v-model="price"></input-money>
  <p>{{price}}</p>
</div>

JavaScript

Vue.component('inputMoney', {
	name: 'inputMoney',
	template: `<input v-model="inputVal">`,
  props: {
  	value: Number
  },
  computed: {
  	inputVal: {
    	get() {
      	const intNum = Math.trunc(this.value)
        const decimal = this.value - intNum
        const intStr = String(intNum)
        const len = intStr.length
        let strVal = ''
        for(let i = len - 1; i >= 0; i--) {
        	const val = i !== 0 && (len - i) % 3 === 0 ? ',' + intStr[i] : intStr[i]
          strVal = val + strVal
        }
        return strVal + (decimal === 0 ? '.00' : decimal.toFixed(2))
      },
      set(value) {
      	const result = Number((value || '').replace(/,/g, '')).toFixed(2)
      	this.$emit('input', Number(result))
      }
    }
  }
})

new Vue({
	el: '#app',
  data: {
  	price: 0
  }
})