vue过滤器filters

示例代码演示vue中局部过滤器和全局过滤器的使用。

<html>

<body>
    <div id="app">
        普通值：{{num}}<br>
        使用局部过滤器：{{num|addOneHundred}}<br>
        使用全局过滤器：{{num|addTwoHundred}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 全局过滤器
        Vue.filter("addTwoHundred", function (val) {
            return 1 + 200;
        })
        let vm = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            // 局部过滤器
            filters: {
                addOneHundred(val) {
                    return val + 100;
                }
            }
        })
    </script>
</body>

</html>

页面效果如下：