VUE之全局过滤器——filter

最新推荐文章于 2019-11-13 10:11:49 发布

渣渣枫!

最新推荐文章于 2019-11-13 10:11:49 发布

阅读量251

点赞数

分类专栏： Vue 文章标签：过滤器 filters 人民币大写

本文链接：https://blog.youkuaiyun.com/qq_42816550/article/details/101100648

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种将人民币数值转换为大写文字的过滤器实现方法。通过在Vue项目中创建自定义过滤器，实现了金额的精准转换，并在页面上直接展示转换后的结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图:
在这里插入图片描述
第一步：在src文件夹下新建filters文件夹,在该文件夹下新建index.js
内容如下

//人民币转大写
function rmbUpper(n) {
    //形参
    var fraction = ["角", "分"];
    var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
    var unit = [
        ["元", "万", "亿"],
        ["", "拾", "佰", "仟"]
    ];
    var head = n < 0 ? "欠" : "";
    n = Math.abs(n);
    var s = "";
    for (var i = 0; i < fraction.length; i++) {
        s += (
            digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]
        ).replace(/零./, "");
    }
    s = s || "整";
    n = Math.floor(n);
    for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = "";
        for (var j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
    }
    return (
        head +
        s
        .replace(/(零.)*零元/, "元")
        .replace(/(零.)+/g, "零")
        .replace(/^整$/, "零元整")
    );
}
export {
    rmbUpper
}

第二步:在main.js中,引用和注册全局过滤器

import * as filters from './filters' // global filters
// register global utility filters.
Object.keys(filters).forEach(key => {
    console.log(filters,key,filters[key])
    Vue.filter(key, filters[key])
})

第三步：页面中直接使用

    <el-form-item label="金额大写">
      <span>{{addFormField.money | rmbUpper}}</span>
    </el-form-item>