Vue.js阿拉伯數字轉化成人民幣的中文
阿新 • • 發佈:2019-01-07
輸入框內輸入數字,後面顯示中文大寫的金額
在template中
在輸入框數字改變的時候實時更改大寫金額數 vue 的@on-change事件
@on-change="NumberToChinese(formCustom.passwd)"
<template> <div class="turnpoint"> <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="194"> <FormItem label="轉點金額" prop="passwd"> <InputNumber @on-change="NumberToChinese(formCustom.passwd)" type="text" :max="1000" :min="1" v-model="formCustom.passwd" style="width: 120px"></InputNumber><span style="margin-left: 10px;">{{text}}</span> </FormItem> </Form> </div> </template>
在script中
你可以看出我的專案時使用vuex的,先宣告兩個變數。text是大寫金額,unit是一個方便轉換的陣列。
緊接著methods裡面是兩個轉換的函式,一個簡單的阿拉伯數字轉化成大寫中文金額就搞定了。
<script> import { mapActions,mapState } from 'vuex'; export default { data () { return { text: '', unit: new Array("仟", "佰", "拾", "", "仟", "佰", "拾", "", "角", "分"), } }, methods: { toDx(n) { //阿拉伯數字轉換函式 switch (n) { case "0": return "零"; case "1": return "壹"; case "2": return "貳"; case "3": return "叄"; case "4": return "肆"; case "5": return "伍"; case "6": return "陸"; case "7": return "柒"; case "8": return "捌"; case "9": return "玖"; } }, // 轉換演算法主函式 NumberToChinese(m){ m *= 100; m += ""; var length = m.length; var result = ""; for (var i = 0; i < length; i++) { if (i == 2) { result = "元" + result; } else if (i == 6) { result = "萬" + result; } if (m.charAt(length - i - 1) == 0) { if (i != 0 && i != 1) { if (result.charAt(0) != '零' && result.charAt(0) != '元' && result.charAt(0) != '萬') { result = "零" + result; } } continue; } result = this.toDx(m.charAt(length - i - 1)) + this.unit[this.unit.length - i - 1] + result; } result += result.charAt(result.length - 1) == '元' ? "整" : ""; this.text=result; } } } </script>