解读vue filter

Posted 2021-01-20 lianxisheng

1.全局filter, 全局的过滤一般在main.js里面使用

 <div id="app">
        <div>
            {{testVal | filVal(10,30)}}
        </div>
 </div>

 

<script>
        Vue.filter(‘filVal‘, function(val, first, second) {
            return val + first + second;
        });
        new Vue({
            el: ‘#app‘,
            data:               
                testVal: 20
            },                
        })
 </script>

　2.局部filter, filter要放在new vue里面, 此时filter要加上s==>filters

 new Vue({
            el: ‘#app‘,
            data: {
                testVal: 20
            },
            methods: {

            },
            filters: {
                filVal: function(val, val1, val2) {
                    return val + val1 + val2
                }
            }
        })

　　

不管是全局过滤还是布局过滤,都是可以传多个值得 ,渲染时用管道符分隔.  在上面传的三个值中,第一个是要过滤的值, 后面的值是过滤传的参数

3,添加多个filter 

<div id="app">
        <div>
            {{testVal | filVal1(10,30) | filVal2("測試") | filVal3("====")}}
        </div>
    </div>

    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                testVal: 20,
                filTest: "測試測試"
            },
            methods: {

            },
            filters: {
                filVal1: function(val, val1, val2) {
                    return val + val1 + val2
                },
                filVal2: function(val, val2) {
                    return val + val2
                },
                filVal3: function(val, val2) {
                    return val + val2
                },
            }
        })
    </script>