vue实时将阿拉伯数字转换成中文大写数字

有个项目在写合同时需要实时显示出中文大写数字。现在需求是将阿拉伯数字数字转换成中文的大写数字。

			首付款（元）
			
				
					
		
		
			首付款（大写）
			
				
					
		
		 

转换大写数字工具

var Utils={
    /*
        单位
    */
    units:'个拾佰仟萬@#%億^&~',
    /*
        字符
    */
    chars:'零壹贰叁肆伍陆柒捌玖',
    /*
        数字转中文
        @number {Integer} 形如123的数字
        @return {String} 返回转换成的形如 一百二十三 的字符串
    */
    numberToChinese:function(number){
        var a=(number+'').split(''),s=[],t=this;
        if(a.length>12){
            throw new Error('too big');
        }else{
            for(var i=0,j=a.length-1;i<=j;i++){
                if(j==1||j==5||j==9){//两位数 处理特殊的 1*
                    if(i==0){
                        if(a[i]!='1')s.push(t.chars.charAt(a[i]));
                    }else{
                        s.push(t.chars.charAt(a[i]));
                    }
                }else{
                    s.push(t.chars.charAt(a[i]));
                }
                if(i!=j){
                    s.push(t.units.charAt(j-i));
                }
            }
        }
        //return s;
        return s.join('').replace(/零([十百千万亿@#%^&~])/g,function(m,d,b){//优先处理 零百 零千 等
            b=t.units.indexOf(d);
            if(b!=-1){
                if(d=='亿')return d;
                if(d=='万')return d;
                if(a[j-b]=='0')return '零';
            }
            return '';
        }).replace(/零+/g,'零').replace(/零([万亿])/g,function(m,b){// 零百 零千处理后 可能出现 零零相连的 再处理结尾为零的
            return b;
        }).replace(/亿[万千百]/g,'亿').replace(/[零]$/,'').replace(/[@#%^&~]/g,function(m){
            return {'@':'十','#':'百','%':'千','^':'十','&':'百','~':'千'}[m];
        }).replace(/([亿万])([一-九])/g,function(m,d,b,c){
            c=t.units.indexOf(d);
            if(c!=-1){
                if(a[j-c]=='0')return d+'零'+b;
            }
            return m;
        });
    }
};
export default Utils;

导入方法

import Utils from "@/utils/num-cn.js"

在watch监听对象中的属性，将转换好的内容显示到页面中

ps:因为要监听的是对象，所以需要深度监听

data() {

    return {
        form: {
            payment_first_uppercase:""
        }
    }
},

watch:{
	 "form.payment_first":{
			handler(newval,oldval){
					this.form.payment_first_uppercase=Utils.numberToChinese(newval)
			},
			immediate:true
		}
			 
},