处理数字格式

注册一个自定义指令 v-setnumber

// 小数点数值处理指令
Vue.directive('setnumber', {
    bind: function(el, binding, vnode) {
        var s = JSON.stringify
        var str = `${s(binding.value)}`
        var str1 = str.trim()
        var flag = true // 最后是否添加-号
        if(str1.indexOf('-') != -1){ //负数特殊处理
            str1 = str1.slice(1)
            console.log('处理后',str1)
            flag = false
        }
        var arr = str1.split('')
        
        if (str1.indexOf('.') == -1) {
            arr.reverse()
            var num = 0
            for (var i = 0; i < arr.length; i++) {
                num++
                if (num > 3) {
                    arr.splice(i, 0, ',')
                    num = 0
                }
            }
            arr.reverse()
            var endstr = arr.join('') + '.00'
            if(flag){
                el.innerText = endstr
            }else{
                el.innerText = '-'+endstr
            }
        } else {
            var newarr = str1.split('')
            var newstr1 = newarr.reverse().join('')
            arr.reverse()
            console.log("newstr1",newstr1)
            console.log("newstr1.indexOf('.')",newstr1.indexOf('.'))
            if (newstr1.indexOf('.') == 2) {
                var num = -3
                for (var i = 0; i < arr.length; i++) {
                    num++
                    if (num > 3) {
                        arr.splice(i, 0, ',')
                        num = 0
                    }
                }
            } else {
                var num = -2
                for (var i = 0; i < arr.length; i++) {
                    num++
                    if (num > 3) {
                        arr.splice(i, 0, ',')
                        num = 0
                    }
                }
                arr.unshift('0')
            }
            arr.reverse()
            var endstr = arr.join('')
            // 插入处理好的数字
            if(flag){
                el.innerText = endstr
            }else{
                el.innerText = '-'+endstr
            }
            
        }

    }

})

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="./number.js"></script>
  <div id="app">
      <div v-setnumber="number"></div>
  </div>
   <script>
      new Vue({
        el: '#app',
        data: {
          number: 1028
        }
      })
   </script>

页面显示： 1,028.00