本篇内容介绍了“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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。