引言：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-numberv-model="num":precision="2":step="0.01":max="9999999"></el-input-number><span>{{ str }}</span><br /><h3>右边方向上下按钮:</h3><!-- 右边方向按钮 --><el-input-numberv-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-numberv-model="num":precision="2":step="0.01":max="9999999"></el-input-number><span>{{ str }}</span><br /><h3>右边方向上下按钮:</h3><!-- 右边方向按钮 --><el-input-numberv-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>

示例图：

教程就到这里，任何问题欢迎下方评论

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

从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
往期从0到1完成一个Vue后台管理项目(一.创建项目) 从0到1完成一个Vue后台管理项目(二.使用element-ui) 从0到1完成一个Vue后台管理项目(三.使用SCSS/LESS,安装图标库 ...
vue后台管理知识点、难点总结01
vue后台管理知识点.难点总结 1.upload时,png格式的不能上传????(不对) 2 js中的项目应用什么时候用async和await 3 添加或者编辑的时候报错:Error in v-on ...
风尚云网学习-H5+css3+js上传文件页面提交不跳转
风尚云网学习-HTML+原生js上传文件页面提交不跳转页面效果图: 众所周知,from表单提交后会自动跳转url, 此时我们可以用一个空的frame 接收,阻止跳转废话不多说,上全部代码: < ...
前端学习笔记 HTML5 保姆级教程
HTML5 保姆级教程前端学习路线: HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js 除了掌握这些技术,后期我还需要 ...
天才少年稚晖君 | 【保姆级教程】个人深度学习工作站配置指南
天才少年稚晖君 | [保姆级教程]个人深度学习工作站配置指南来源:https://zhuanlan.zhihu.com/p/336429888 0. 前言工作原因一直想配置一台自己的深度学习工作站 ...
Vue脚手架的安装（保姆级教程）
Vue脚手架的安装(保姆级教程) 文章目录 Vue脚手架的安装(保姆级教程) 1.下载vscode 2.node下载 5.Vue脚手架的安装 6.创建Vue项目 7.项目的运行 1.下载vscode ...
保姆级教程——Ubuntu16.04 Server下深度学习环境搭建：安装CUDA8.0，cuDNN6.0，Bazel0.5.4，源码编译安装TensorFlow1.4.0(GPU版)...
写在前面本文叙述了在Ubuntu16.04 Server下安装CUDA8.0,cuDNN6.0以及源码编译安装TensorFlow1.4.0(GPU版)的亲身经历,包括遇到的问题及解决办法,也有一些 ...
重磅！深度学习神器 - 高层API 最强保姆级教程公开！
很多小伙伴在后台给我留言,零基础如何入门深度学习?想要做算法工程师,自学了python基础,现在还来得及吗? 这个问题很大.很难说一篇文章几句话就能解决这个问题.今天我给大家说一下自己的一些个人经验, ...
【强化学习实战-04】DQN和Double DQN保姆级教程（2）：以MountainCar-v0
[强化学习实战-04]DQN和Double DQN保姆级教程(2):以MountainCar-v0 实战:用Double DQN求解MountainCar问题 MountainCar问题详解 Moun ...
C#人民币金额大小写转换
C#人民币金额大小写转换在财务相关的软件的时候,常常设计到大小写金额的转换,小编整理了自己常用的数字金额大小写转换的方法代码给大家参考如下: /// <summary> /// 金额小 ...

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