v-money
如果你需要在输入框里加上货币前缀或后缀、保留小数点位数或者设置小数点符号——不用找了,就是这个了。
下面直接上代码
<template>
<div>
<input v-model.lazy="money" v-money="money" /> {{price}}
</div>
<script>
export default {
data () {
return {
money: 123.45,
}
}
}
</script>
</template>
directive.js里写入
/*
* vue 中自定义指令
*/
import Vue from 'vue'
//金额格式化渲染
Vue.directive('money', {
inserted (el, binding) {
let num = binding.value ? binding.value : 0
num = num.toString().replace(/\$|,/g, '')
if (isNaN(num)) { num = '0' }
num = Math.floor(num * 100 + 0.50000000001)
let cents = num % 100
num = Math.floor(num / 100).toString()
if (cents < 10) { cents = '0' + cents }
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) {
num = num.substring(0, num.length - (4 * i + 3)) + ',' +
num.substring(num.length - (4 * i + 3))
}
el.innerText = ('¥' + num + '.' + cents)
}
})
export default Vue
然后main.js中引入
写在最后 欢迎大家留言~