Vue 全局过滤器和局部过滤器使用方式 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>测试过滤器单个参数</h3>
        <p>{{content|contentFilter}}</p>
        <input type="text" name="" id="" :value="content|contentFilter">

        <h3>测试过滤器多个参数</h3>
        <p>{{javaScore|addFilter(pythonScore,vueScore)}}</p>
        <input type="text" name="" id="" :value="javaScore|addFilter(pythonScore,vueScore)">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        // /*全局过滤器*/
        // Vue.filter('contentFilter', function (value) {
        //     if (!value) {
        //         return ''
        //     }
        //     return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '****')
        // })
        new Vue({
            el: '#app',
            data: {
                content: '小伙子，TMD就是SB',
                javaScore: 90,
                pythonScore: 80,
                vueScore: 70
            },
            //局部过滤器
            filters: {
                'contentFilter': function (value) {
                    if (!value) {
                        return ''
                    }
                    return value.toString().toUpperCase().replace('TMD', '***').replace('SB', '****')
                },
                addFilter(num1, num2, num3) {
                    return num1 + num2 + num3
                }
            }
        })
    </script>

</body>

</html>

　　注意：当前v-bind过滤器只支持v2.0+版本，不支持v-model的方式使用

posted on 2021-06-05 14:57  水行者  阅读(328)  评论(0)    收藏  举报

导航