vue将数字转为中文大写金额方式
更新时间：2022年07月31日 09:50:51 作者：QSWQSWQSWQSWQSW
这篇文章主要介绍了vue将数字转为中文大写金额方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
将数字转为中文大写金额
记得引入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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue3中使 echarts 图表宽度自适应变化的操作方法
本文介绍了在Vue3中使用ECharts时,如何使图表容器宽度自适应页面大小,通过修改模板中的div样式,将宽度设置为100%,并监听窗口大小变化事件,调用ECharts实例的resize方法,实现图表的自适应调整,感兴趣的朋友跟随小编一起看看吧2025-02-02
单页面是指整个应用程序只有一个唯一完整的 HTML 页面，而其它所谓的页面，其实都是组件片段而已，切换页面也只是切换一个 HTML 中显示不同的组件片段。在今后所有的开发项目都是单页面应用2022-08-08
今天小编就为大家分享一篇vue中动态添加class类名的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于vue项目中按钮防抖处理实现的相关资料,在项目开发中相必大家时常会遇到按钮重复点击后引起事件重复提交的问题,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue和React的相同点不不同点，文中对比介绍的非常详细，对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-05-05
今天小编就为大家分享一篇vue 组件的封装之基于axios的ajax请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2024-02-02
vite创建vue3项目页面引用public下js文件失败解决办法
Vue3相较于之前的版本有了不少变化,如引用全局Js文件,这篇文章主要给大家介绍了关于vite创建vue3项目页面引用public下js文件失败的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
Vue.js 是一个流行的前端框架,它提供了多种方法来实现数据的双向绑定和事件处理,在构建表单时,我们经常需要实现清空输入框的功能,本文将介绍两种在Vue中实现输入框清空功能的方法,感兴趣的小伙伴跟着小编一起来看看吧2024-12-12
这篇文章主要为大家介绍了绘制flowable 流程图的Vue 库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论