vue中的过滤器（将数字转换为中文数字）

最新推荐文章于 2023-10-16 16:45:58 发布

原创最新推荐文章于 2023-10-16 16:45:58 发布 · 903 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #elementui

效果专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue.js中使用自定义货币过滤器，展示了如何将数字以货币形式显示，并处理字符串货币格式。还涉及了数字转中文数字的示例和输入框的v-model绑定。

<body>
    <div id="app">
        <div>{{123.123|currency(2,'£')}}</div>
        <div>{{'cassadasdasdxf'|money}}</div>
        <input type="number" v-model="val">
        <p>{{val|str}}</p>
    </div>
</body>
</html>
<script src="../js/vue.js"></script>
<script>
    /*
    过滤器：其实是一个函数，通过该函数输出需要的数据形式
    语法  数据 | 过滤器
    创建
    filter('过滤器名字'，操作函数)

    操作函数的参数
    fun(val,arg1,arg2...){}
    */
   Vue.filter('currency',(value,arg1,arg2)=>{
    // return '¥'+ value.toFixed(arg1);
    return arg2+ value.toFixed(arg1);

   })
    const vm = new Vue({
        el:'#app',
        data:{
            val:''
        },
        methods:{},
        filters:{
            money(value){
             return value.toUpperCase();

            },
            //数字转换为中文数字
            str(v){
                console.log(v);
                let obj = {
                    0:'零',
                    1:'一',
                    2:'二',
                    3:'三',
                    4:'四',
                    5:'五',
                    6:'六',
                    7:'七',
                    8:'八',
                    9:'九',
                }
                let s = '';
                for(var i=0;i<v.length;i++){
                    console.log(v[i]);
                    s += obj[v[i]];
                }
                return s;
            }
        }
    })
</script>

展示效果