小生愛

{{message | reverse "参数1" "参数2"}}
        

        // 过滤器可以接受参数 用空格分隔
        <span>{{message | reverse "参数1" "参数2"}}</span>

        <script>
                // 自定义过滤器
                // 方式一 : 全局定义   Vue.filter('过滤器名', 方法);
                Vue.filter('reverse', function (...value){
                    let [v1, v2, v3] = value;
                    return v1 + v2 + v3;
                });

                // 实例根元素
                new Vue({
                    el : 'body',
                    data : {
                        message : '原始值'
                    }
                });
        </script>
{{message | reverse "参数1" "参数2"}}
   

        // 过滤器可以接受参数 用空格分隔
        <span>{{message | reverse "参数1" "参数2"}}</span>

        <script>
                // 局部定义
                new Vue({
                    el : 'body',
                    data : {
                        message : '原始值'
                    },
                    // 局部定义过滤器
                    filters : {
                        reverse (...value){
                            let [v1, v2, v3] = value;
                            return v1 + v2 + v3;
                        }
                    }
                });
        </script>
{{message | reverse bl1 bl2}}
   

        // 动态参数 不要带引号 参数用空格分隔
        <span>{{message | reverse bl1 bl2}}</span>

        <script>
                // 全局设置动态过滤器
                Vue.filter('reverse', function (...value){
                    let [v1, v2, v3] = value;
                    return v1 + v2 + v3;
                });

                new Vue({
                    el : 'body',
                    data : {
                        message : '原始值',
                        // 设置动态参数值1
                        bl1 : '动态参数1',
                        // 设置动态参数值2
                        bl2 : '动态参数2'
                    }
                });
        </script>
{{message | reverse bl1 bl2}}
   

        // 动态参数 不要带引号 参数用空格分隔
        <span>{{message | reverse bl1 bl2}}</span>

        <script>
                // 局部设置动态参数
                new Vue({
                    el : 'body',
                    data : {
                        message : '原始值',
                        // 设置动态参数值1
                        bl1 : '动态参数1',
                        // 设置动态参数值2
                        bl2 : '动态参数2'
                    },
                    filters : {
                        reverse (...value){
                            let [v1, v2, v3] = value;
                            return v1 + v2 + v3;
                        }
                    }
                });
        </script>