vue 过滤器

Vue.js过滤器实践

最新推荐文章于 2025-09-07 22:13:39 发布

weixin_33747129

最新推荐文章于 2025-09-07 22:13:39 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://yq.aliyun.com/articles/649013

<body>

    <div id="app">

        <input type="text" v-model="money">

        <!-- 有时在页面上渲染的数据需要进行一定的加工，例如需要四舍五入，格式转换等，在vue中推荐的做法是使用过滤器 -->

        <!-- 过滤器使用格式：{{数据|过滤器}} -->

        <p>{{money|rounding|seperate|currency}}</p>

        <!-- 区别  任何一个值换一种写法 -->

    </div>

    <script src="vue.js"></script>

    <script>

        // vue中没有自带的过滤器，必须自己创建过滤器。

        // 创建过滤器有两种方法：全局注册过滤器，局部过滤器。

        // 全局注册的过滤器可以在项目中任何地方使用

        // 在某个组件中局部注册的过滤器只能在这个组件的模板中使用。

        // Vue.filter方法，用于全局注册一个过滤器，第一个参数是过滤器名字，第二个参数是过滤器函数。过滤函数接受需要过滤的值为参数，返回过滤之后的值。

        // 全局注册过滤器必须在根组件之前。

        Vue.filter("currency", function (v, c) {

            if (c)

                return c + v;

            return "￥" + v;
        });

        new Vue({

            el: "#app",

            data: {

                money: 0,
            },

            methods: {

            },

            // filter用于在本组件中注册过滤器，在某个组件中局部注册的过滤器，只能在这个组件的模板中使用，类型是一个对象，对象中键是一个过滤器名字，值是过滤函数。

            filters: {

                rounding(v) {

                    if (v == null || v == undefined||v=="") {

                        return null;
                    }

                    return v.toFixed(2);
                },

                seperate(v) {

                    let str="v";

                    let count=0;

                    for(let i=str.length-4;i>=0;i--){

                        count++;

                        if(count==3&&i!=0){

                            count=0;

                            let arr=str.split("");

                            arr.splice(i,0,",");

                            str=arr.json("");
                        }
                    }

                    return str;
                },

            }
        })

        function n(num) {
            
            var str = "" + num;
            
            var arr = str.split("");

            console.log(arr)

            for (var i = arr.length - 3; i > 0; i -= 3) {

                console.log(i)

                arr.splice(i, 0, ",");
            }

            return arr.join("");
            
        }

        // console.log(n(123456789))
        
    </script>
</body>