1. 程式人生 > 其它 >vue過濾器filters

vue過濾器filters

技術標籤:過濾器vuefilternodejsnpm

示例程式碼演示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>

頁面效果如下: