Vue 过滤器

过滤器

只适用于简单逻辑的处理，复杂逻辑不建议使用

配置

// 全局过滤器
Vue.filter('filter',function(value,arg){
    return true
})

// 局部过滤器
new Vue({
    data:{},
    filters:{
        filter:function(){}
    }
})

语法

<span>{{ value | filter}}</span>
<span :x="value | filter">demo</span>

传参
{{value | filter(arg1)}}

串联
{{value | filter(arg1) | filter2(arg2)}}
串联的顺序是从左到右

demo

<body>
    <div id="root">
        <h1>过滤器</h1>
        <h3>{{ value | slice(3) | add('*') }}</h3>
    </div>
    <script>
        Vue.filter('slice', (value, arg) => value.slice(arg))
        const vm = new Vue({
            el: "#root",
            data: {
                value: '1234'
            },
            filters: {
                add: (value, arg) => value + arg
            }
        })
    </script>
</body>
posted @ 2022-02-01 20:44  IslandZzzz  阅读(26)  评论(0)  编辑  收藏  举报