风尚云网学习-vue后台管理之金额大小写转换实例【精准到分0.01】保姆级教程

风尚云网

已于 2022-04-01 08:33:03 修改

阅读量960

点赞数 1

分类专栏： vue后台管理风尚云网学习文章标签： vue.js javascript elementui 学习风尚云网

于 2022-03-29 10:28:43 首次发布

本文链接：https://blog.csdn.net/zsx0806/article/details/123814103

版权

风尚云网学习同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue后台管理

9 篇文章 0 订阅

订阅专栏

引言：vue后台管理之金额大小写转换实例：【精准到分0.01】

引言：vue后台管理之金额大小写转换实例：【精准到分0.01】

插件准备：

UI引用：饿了么组件InputNumber 计数器*可选全局引用/局部引用

Element - The world's most popular Vue UI framework

vue后台管理框架准备：v2/v3都可

基础准备：会JS了解JS

编写前准备：

下面是编写该方法需要用到的关键知识点：

1. charAt(index)：可返回指定位置的字符。

2. substr(start, length)：返回从一个指定位置开始的指定长度的字符串。

参数：

start: 必选项，所需截取字符串的起始位置；
length: 可选项，返回字符串包含的字符个数，当length<=0的时候，表示返回一个空的字符串；当length没有指定的时候，表示截取的字符串从start延续到字符串的最后。

3. substring(start, end): 返回指定字符串。

参数：

start: 指明子字符串的起始位置，该索引从 0 开始起算；
end: 指明子字符串的结束位置，该索引从 0 开始起算。

特殊情况：

只包含一个参数，则默认将该参数设为起始位子，返回从该参数起到字符串末尾的字符;

start和end两者之间以较小的作为起始，较大的作为结束，比如a.substring(1, 5)和a.substring(5, 1)返回的字符串相同；

如果start或end为NaN或者负数，则将其置为0。

代码实现：

template区代码：

<template>
  <div id="app">
    <h1>风尚云网学习步进器-大小写转换[精确到0.01分]</h1>
    <br />
    <!-- 右边方向按钮 -->
    <h3>左右边方向按钮:</h3>
    <el-input-number
      v-model="num"
      :precision="2"
      :step="0.01"
      :max="9999999"
    ></el-input-number>
    <span>{{ str }}</span>
    <br />
    <h3>右边方向上下按钮:</h3>
    <!-- 右边方向按钮 -->
    <el-input-number
      v-model="num"
      :precision="2"
      :step="0.01"
      :max="9999999"
      controls-position="right"
    ></el-input-number>
    <!-- 大小写转换 -->
    <span>{{ str }}</span>
  </div>
</template>

JS代码：

<script type="text/javascript">
export default {
  data() {
    return {
      // 默认值
      num: 1,
      // 大小写
      str: "",
    };
  },
  created() {
    // 开始默认调用
    this.ToString();
  },
  watch: {
    num: function (val, oldVal) {
      console.log("监听：：new: %s, old: %s", val, oldVal);
      // 监听num动态
      this.ToString();
    },
  },
  methods: {
    ToString() {
      let num1 = this.num;
      let num = num1.toString();
      if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(num)) {
        return "数据非法"; //判断数据是否大于0
      }
      var unit = "千百拾亿千百拾万千百拾元角分",
        str = "";
      num += "00";
      var indexpoint = num.indexOf("."); // 如果是小数，截取小数点前面的位数
      if (indexpoint >= 0) {
        num = num.substring(0, indexpoint) + num.substr(indexpoint + 1, 2); // 若为小数，截取需要使用的unit单位
      }
      unit = unit.substr(unit.length - num.length); // 若为整数，截取需要使用的unit单位
      for (var i = 0; i < num.length; i++) {
        str += "零壹贰叁肆伍陆柒捌玖".charAt(num.charAt(i)) + unit.charAt(i); //遍历转化为大写的数字
      }
      let str2 = str
        .replace(/零(千|百|拾|角)/g, "零")
        .replace(/(零)+/g, "零")
        .replace(/零(万|亿|元)/g, "$1")
        .replace(/(亿)万|壹(拾)/g, "$1$2")
        .replace(/^元零?|零分/g, "")
        .replace(/元$/g, "元整"); // 替换掉数字里面的零字符，得到结果
      console.log(str2);
      // 赋值
      this.str = str2;
    },
  },
};
</script>

整个页面完整代码：

<template>
  <div id="app">
    <h1>风尚云网步进器-大小写转换[精确到0.01分]</h1>
    <br />
    <!-- 右边方向按钮 -->
    <h3>左右边方向按钮:</h3>
    <el-input-number
      v-model="num"
      :precision="2"
      :step="0.01"
      :max="9999999"
    ></el-input-number>
    <span>{{ str }}</span>
    <br />
    <h3>右边方向上下按钮:</h3>
    <!-- 右边方向按钮 -->
    <el-input-number
      v-model="num"
      :precision="2"
      :step="0.01"
      :max="9999999"
      controls-position="right"
    ></el-input-number>
    <!-- 大小写转换 -->
    <span>{{ str }}</span>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      // 默认值
      num: 1,
      // 大小写
      str: "",
    };
  },
  created() {
    // 开始默认调用
    this.ToString();
  },
  watch: {
    num: function (val, oldVal) {
      console.log("监听：：new: %s, old: %s", val, oldVal);
      // 监听num动态
      this.ToString();
    },
  },
  methods: {
    ToString() {
      let num1 = this.num;
      let num = num1.toString();
      if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(num)) {
        return "数据非法"; //判断数据是否大于0
      }
      var unit = "千百拾亿千百拾万千百拾元角分",
        str = "";
      num += "00";
      var indexpoint = num.indexOf("."); // 如果是小数，截取小数点前面的位数
      if (indexpoint >= 0) {
        num = num.substring(0, indexpoint) + num.substr(indexpoint + 1, 2); // 若为小数，截取需要使用的unit单位
      }
      unit = unit.substr(unit.length - num.length); // 若为整数，截取需要使用的unit单位
      for (var i = 0; i < num.length; i++) {
        str += "零壹贰叁肆伍陆柒捌玖".charAt(num.charAt(i)) + unit.charAt(i); //遍历转化为大写的数字
      }
      let str2 = str
        .replace(/零(千|百|拾|角)/g, "零")
        .replace(/(零)+/g, "零")
        .replace(/零(万|亿|元)/g, "$1")
        .replace(/(亿)万|壹(拾)/g, "$1$2")
        .replace(/^元零?|零分/g, "")
        .replace(/元$/g, "元整"); // 替换掉数字里面的零字符，得到结果
      console.log(str2);
      // 赋值
      this.str = str2;
    },
  },
};
</script>