本篇內容介紹了“vue如何將數字轉為中文大寫金額”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
記得引入vue.js文件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用vue將數字轉為中文大寫金額</title>
<script src='vue.js'></script>
</head>
<body>
<div id="box">
<h2 v-if='flag'>我已經限制長度了,放棄吧</h2>
<h2 v-if='flag'><button @click='shutDown'>關閉</button></h2>
<input type="text" v-model='inputVal'>
<!--<button @click='to_ch'>轉換</button>-->
{{inputVal | toChies}}
<!--過濾器-->
</div>
</body>
<script>
var app = new Vue({
el:"#box",
data:{
inputVal:'',
flag:false,
values:''
},
filters:{//局部過濾器
toChies:function(values){//形參
let len=values.length//統計出長度
let arr=[];
let chin_list=['零','壹','貳','叁','肆','伍','陸','柒','捌','玖']//所有的數值對應的漢字
let chin_lisp=['仟','佰','拾','億','仟','佰','拾','萬','仟','佰','拾']//進制
for(let i=0;i<len;i++){
arr.push(parseInt(values[i])); //輸入的數據按下標存進去 存進去的只是數字
arr[i]=chin_list[arr[i]] //是根據我們輸入的輸入的數字,對應著我們的chin_list這個數組
}//123['壹','佰','貳','拾','叁']
for(let i=len-1,j=1;i>0;i--){//i =2 1 //倒序 為了添加進制,方便我們去觀看
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><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('不含稅金額(大寫)')" prop="taxNotIncludedCapital">
<el-input v-model="form.taxNotIncludedCapital" :placeholder="$t('不含稅金額(大寫)')" show-word-limit maxlength="32" />
</el-form-item>
</el-col>computeLen1(number) {
let ret = ''
if (number !== '' && number != null && number !== '0') {
let unit = '仟佰拾億仟佰拾萬仟佰拾元角分'
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(/零(萬|億|元)/g, '$1')
.replace(/(億)萬|(拾)/g, '$1$2')
.replace(/^元零?|零分/g, '')
.replace(/元$/g, '元') + '整'
}
this.form.taxNotIncludedCapital = ret
},@input事件:實時操作事件
過程:通過@input事件傳入參數(123)到computeLen1方法中,通過一系列操作,最終拿到ref(壹佰貳拾叁元整),賦值到this.form.taxNotIncludedCapital
“vue如何將數字轉為中文大寫金額”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。