Bootstrap

vue中自定义指令v-money和使用

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中引入
在这里插入图片描述
写在最后 欢迎大家留言~

;