必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-08-09 17:40:00来源:IT技术作者:seo实验室小编阅读:67次「手机版」
 

大写数字转换

记得引入vue.js文件

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用vue将数字转为中文大写金额</title>
	<script src='vue.js'></script>
</head>
<body>
	<p 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}}
		<!--过滤器-->
	</p>	
</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>

相关阅读

数字营销,是企业数字化转型的最佳切入口

数字营销的运营体系就像正二十面体,从任何角度看到的都是相似的外观,但是却有着不同的本质。编者注:Gartner今年的CMO营销支出调查中

使用python做一个玩数字炸弹的游戏

 使用python3,数字炸弹游戏规则:在一个数字范围内,有一个数字作为炸弹,谁猜中这个炸弹就被惩罚。比如范围是1~100,炸弹是60,然后猜了

数字电路基础知识(一)

PS:为了面试准备的,总结的比较粗糙。 真值表/卡诺图 1.建立时间和保持时间 Setup time, Tsu 建立时间  在时钟沿到来之前数据稳定不

给定一个大写字母,要求用小写字母输出

#include <stdio.h>int main(){   char c1,c2;   c1='A';   c2=c1+32;   printf("%c\n",c2);   printf("%d\n",c2);}

Vue-lazyload原理详解之源码解析

原文:https://blog.csdn.net/u010014658/article/details/73477232 前叙 本来想要研究mint-ui组件库的Lazy load组件,没想到翻看它

分享到:

栏目导航

推荐阅读

热门阅读