Vue中自定义指令---金额

在平时的需求开发中，会遇到很多金额类的需求，可以封装一个自定义指令
money.js文件

export function toMoney(num) {
  if (num) {
    if (isNaN(num)) {
      // alert('金额中含有不能识别的字符')
      return
    }
    num = typeof num == 'string' ? parseFloat(num) : num //判断是否是字符串如果是字符串转成数字
    num = num.toFixed(2) //保留两位
    num = parseFloat(num) //转成数字
    num = num.toLocaleString() //转成金额显示模式
    //判断是否有小数
    if (num.indexOf('.') == -1) {
      num = num + '.00'
    } else {
      num = num.split('.')[1].length < 2 ? num + '0' : num
    }
    return num //返回的是字符串23,245.12保留2位小数
  } else {
    return (num = '0.00')
  }
}

export function toNum(money) {
  let num = 0
  num = money.split(',').join('')
  return num
}

const money = (el, binding) => {
  let num = binding.value ? binding.value : 0

  el.innerText = toMoney(num)
}
export default money

main.js引入

import money from './money'
app.use(money)

在Vue文件中

<span v-money>{{渲染值}}</span>
<div>{{ toMoney(值 ) }}</div>