文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue将数字转为中文大写金额方式

2022-11-13 13:50

关注

将数字转为中文大写金额

记得引入vue.js文件

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用vue将数字转为中文大写金额</title>
	<script src='vue.js'></script>
</head>
<body>
	<div id="box">
		<h1 v-if='flag'>我已经限制长度了,放弃吧</h1>
		<h1 v-if='flag'><button @click='shutDown'>关闭</button></h1>
		<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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯