<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用vue將數(shù)字轉(zhuǎn)為中文大寫(xiě)金額</title>
	<script src='vue.js'></script>
</head>
<body>
	<div id="box">
		<h1 v-if='flag'>我已經(jīng)限制長(zhǎng)度了,放棄吧</h1>
		<h1 v-if='flag'><button @click='shutDown'>關(guān)閉</button></h1>
		<input type="text" v-model='inputVal'>
		<!--<button @click='to_ch'>轉(zhuǎn)換</button>-->
		{{inputVal | toChies}}
		<!--過(guò)濾器-->
	</div>	
</body>
	<script>
		var app = new Vue({
			el:"#box",
			data:{
				inputVal:'',
				flag:false,
				values:''
			},
			filters:{//局部過(guò)濾器
			
			
				toChies:function(values){//形參
					let len=values.length//統(tǒng)計(jì)出長(zhǎng)度
					let arr=[];
					
					let chin_list=['零','壹','貳','叁','肆','伍','陸','柒','捌','玖']//所有的數(shù)值對(duì)應(yīng)的漢字
					
					let chin_lisp=['仟','佰','拾','億','仟','佰','拾','萬(wàn)','仟','佰','拾']//進(jìn)制
					
					for(let i=0;i<len;i++){
						arr.push(parseInt(values[i]));		//輸入的數(shù)據(jù)按下標(biāo)存進(jìn)去   存進(jìn)去的只是數(shù)字
						arr[i]=chin_list[arr[i]]			//是根據(jù)我們輸入的輸入的數(shù)字，對(duì)應(yīng)著我們的chin_list這個(gè)數(shù)組
					}//123['壹','佰','貳','拾','叁']
					
					for(let i=len-1,j=1;i>0;i--){//i =2	1		//倒序		為了添加進(jìn)制，方便我們?nèi)ビ^看
						arr.splice(i,0,chin_lisp[chin_lisp.length-j++])	//j=2
					}
					console.log(arr)
					
					arr=arr.join('')
					if(len>=1){
						arr+='元整'
					}
					return arr
				}
				
				
			},
			watch:{
				inputVal(newVal,oldVal){
					if(newVal.length==13){
						this.inputVal=oldVal
						this.flag=true
					}
				}
			},
			methods:{
				shutDown(){
					this.flag=false
				},
				to_ch(){
					console.log(this.inputVal)
					this.inputVal=this.values
				}
			}
		})
	</script>
</html>

數(shù)字(金額)大小寫(xiě)實(shí)時(shí)轉(zhuǎn)換

<el-col :span="12">
   <el-form-item :label="$t('不含稅金額')" prop="taxNotIncluded">
      <el-input v-model="form.taxNotIncluded" :placeholder="$t('不含稅金額')" show-word-limit @input="computeLen1(form.taxNotIncluded)" />
   </el-form-item>
</el-col>
 
<el-col :span="12">
   <el-form-item :label="$t('不含稅金額(大寫(xiě))')" prop="taxNotIncludedCapital">
      <el-input v-model="form.taxNotIncludedCapital" :placeholder="$t('不含稅金額(大寫(xiě))')" show-word-limit maxlength="32" />
   </el-form-item>
</el-col>

computeLen1(number) {
            let ret = ''
              if (number !== '' && number != null && number !== '0') {
                let unit = '仟佰拾億仟佰拾萬(wàn)仟佰拾元角分'
                let str = ''
                number += '00'
                const point = number.indexOf('.')
                if (point >= 0) {
                  number = number.substring(0, point) + number.substr(point + 1, 2)
                }
                unit = unit.substr(unit.length - number.length)
                for (let i = 0; i < number.length; i++) {
                  str +=
                    '零壹貳叁肆伍陸柒捌玖'.charAt(number.charAt(i)) + unit.charAt(i)
                }
                ret =
                  str
                    .replace(/零(仟|佰|拾|角)/g, '零')
                    .replace(/(零)+/g, '零')
                    .replace(/零(萬(wàn)|億|元)/g, '$1')
                    .replace(/(億)萬(wàn)|(拾)/g, '$1$2')
                    .replace(/^元零?|零分/g, '')
                    .replace(/元$/g, '元') + '整'
              }
              this.form.taxNotIncludedCapital = ret
          },

@input事件：實(shí)時(shí)操作事件

過(guò)程：通過(guò)@input事件傳入?yún)?shù)（123）到computeLen1方法中，通過(guò)一系列操作，最終拿到ref（壹佰貳拾叁元整），賦值到this.form.taxNotIncludedCapital

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: