vue-过滤器

1、过滤器使用:

       <!-- 简单过滤器的使用 -->
       <p>{{123456.123456 | numberFil}}</p>


       <!-- 接收参数的过滤器 -->
       <p> {{12.456789 | numberFilArgument( 2 ) }} </p>


       <!-- 多个过滤器同时使用 -->
       <p>{{987.654321 | numberFil | precentFormat}}</p>

<!-- 全局过滤器使用 -->
       <p>{{4.123 | numberFilters}}</p>
    

2、过滤器定义

局部过滤器的定义

<script>
    export default {
        name: 'hello',
        filters: {
            // 简单过滤器使用
            numberFil: function(val){
                return val.toFixed(2);
            },
            // 接收参数的过滤器, v 表示传过来的参数 2
            numberFilArgument: function(val,v){
                v = v || 1;
                return val.toFixed(2) * v;
            },
            precentFormat: function(val){
                return val * 100;
            }
        },
        data () {
            return {
            }
        }
    }
</script>

全局过滤器的定义

<script>
    import Vue from 'vue';
    // 定义全局过滤器
    Vue.filter('numberFilters',function(val){
        return val * 100;
    })
    export default {
        name: 'hello',
        data () {
            return {
            }
        }
    }
</script>