輸入框內輸入數字，後面顯示中文大寫的金額

在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>