vue-过滤器（filter）的使用详解

前言

　　Vue 允许我们在项目中定义过滤器对我们页面的文本展示进行格式的控制，本文就来总结一下过滤器在项目中的常见使用方法。

正文

　　1.局部过滤器的注册

　　（1）无参局部过滤器

    <div id="app">
        <!-- 组件内部的过滤器 -->
        <filter-item :msg="toMsg"></filter-item>
    </div>
    <script>
        //   组件内部注册过滤器
        Vue.component("filter-item", {
            data() {
                return {
                }
            },
            props: ['msg'],
            filters: {
                toFixed(value) {
                    if (!value) {
                        return
                    }
                    return value.toFixed(2)
                },
            },
            template: "<div>{{msg|toFixed}}</div>"
        })
        new Vue({
            el: "#app",
            data() {
                return {
                    toMsg: 123,
                }
            },
        })
    </script>

　　运行结果如下：

　　上面的代码中在子组件内部定义一个过滤器，在其模板中的插值表达式中使用，完成了对字符串的格式化。

　　（2）带参局部过滤器

    <div id="app">
        <!-- 组件内部的过滤器 -->
        <filter-item :msg="toMsg"></filter-item>
    </div>
    <script>
        //   组件内部注册过滤器
        Vue.component("filter-item", {
            data() {
                return {
                }
            },
            props: ['msg'],
            filters: {
                toString(value,arg){
                    if (!value) {
                        return
                    }
                    console.log("value",value);
                    return value.toString(arg)
                }
            },
            template: "<div>{{msg|toString(2)}}</div>"
        })
        //   全局注册过滤器
        new Vue({
            el: "#app",
            data() {
                return {
                    toMsg: 123,
                }
            },
        })
    </script>

　　运行结果如下：

　　上面的代码中在组件内部定义一个过滤器，接受两个参数，第一个参数是需要格式化的文本，第二个是需要进行的进制转化。

　　2.全局过滤器的注册

　　（1）无参全局过滤器

    <div id="app">
        <!-- 全局的过滤器 -->
        {{myMsg|toUpper}}
    </div>
    <script>
        //   全局注册过滤器
        new Vue({
            el: "#app",
            data() {
                return {
                    myMsg: "abcdef"
                }
            },
            filters: {
                toUpper(value) {
                    if (!value) {
                        return
                    }
                    return value.toUpperCase()
                },
            },
            methods: {
            }
        })
    </script>

　　运行结果如下：

　　上面的代码中在vue根组件中定义一个过滤器，该过滤器为全局过滤器，同样通过插值表达式完成格式转化。

　　（2）带参全局过滤器

 　　<div id="app">
        <!-- 传递参数的过滤器 -->
        {{myMsg|toSlice(3)}}
    </div>
    <script>
        //   全局注册过滤器
        new Vue({
            el: "#app",
            data() {
                return {
                    toMsg: 123,
                    myMsg: "abcdef"
                }
            },
            filters: {
                // 传参的过滤器
                toSlice(value,arg){
                   if (!value) {
                        return
                    }
                    return value.slice(arg)
                }
            },
        })
    </script>        

　　运行结果如下：

　　上面的代码中在vue根组件中定义一个全局过滤器，该过滤器接收两个参数，第一个参数为需要格式化的文本，第二个为真正的参数。

　　注意：当局不和全局有两个名称相同的过滤器的时候，会首先使用局部过滤器，这里采用就近原则，局部过滤器会优先于全局过滤器的调用。

　　3.过滤器的使用

　　在插值表达式中使用带个过滤器如上文，如果需要组合使用多个过滤器的时候，需要用 "|"分隔符隔开。使用如下：

　　<div id="app">
        <!-- 串联的过滤器 -->
        {{myMsg|toUpper|toReverse}}
    </div>
    <script>
        //   全局注册过滤器
        new Vue({
            el: "#app",
            data() {
                return {
                    toMsg: 123,
                    myMsg: "abcdef"
                }
            },
            filters: {
                toUpper(value) {
                    if (!value) {
                        return
                    }
                    return value.toUpperCase()
                },
                toReverse(value) {
                    if (!value) {
                        return
                    }
                    return value.split("").reverse().join("")
                },
            }
        })
    </script>

　　运行结果如下：

　　上面的代码使用了串联的过滤器，首先通过toUpper过滤器对文本进行大写转化，然后toReverse过滤器对文本进行反转转化，最终得到结果。

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。