Vue：过滤器

过滤器

所谓过滤器就是对数据的处理

一、局部过滤器

局部过滤器，就是在组件的内部使用

//1.注册局部过滤器  filters在组件对象中定义
filters:{
    '过滤器的名字':function(value){
    }   
}

//2.使用过滤器 使用管道符 |     其中管道符前面的算是第一个参数
{{price  | '过滤器的名字'}}

过滤器的定义和使用：

<div id="app">
    <App/>
</div>

<script src="../vue.js"></script>
<script src="moment.js"></script>          moment的使用
<script>
---------------------------------------------------------------------------------------------------

    let App = {
        data(){
            return{
                msg:"hello world",
                time:new Date()

            }
        },
        template:`
        <div>我是一个APP {{ msg|myReverse }}
 　　　　　　　　　　　　　　　　　　　　　　　　　　
        <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>　　　　　　　　　　　　　　　　　　　　　　　　　　　　二：使用过滤器    
        </div>
        `,    //使用过滤器，time是第一个参数val,'YYYY-MM-DD'是第二个参数
        filters:{   //定义过滤器；filters:多个过滤器
            myReverse:function (val) {   //声明过滤器；val就是要过滤的那种数据                        一： 自定义过滤器
                return val.split('').reverse().join('')
            },
            myTime:function(val,formatStr){
return moment(val).format(formatStr);
                }

        }
    };
-------------------------------------------------------------------------------------------    
    new Vue({
        el:"#app",
        data(){
            return {

            }
        },
        components:{
            App
        }
    })
</script>

二、全局过滤器

全局过滤器在任何组件中都可以使用

// 注册全局的过滤器
//第一个参数是过滤器的名字，第二个参数是执行的操作

Vue.filter('reverse',function(value) {    
    return value.split('').reverse().join('');
});

//使用跟 局部过滤器一样

全局过滤器定义和使用：

<div id="app">
    <App/>
</div>

<script src="../vue.js"></script>
<script src="moment.js"></script>
<script>
------------------------一：创建全局过滤器-------------------------------------------------------------

    //全局过滤器
    Vue.filter('myTime',function (val,formatStr) {
        return moment(val).format(formatStr);
    });

----------------------------二：使用过滤器----------------------------------------------------------------
    let App = {
        data(){
            return{
                msg:"hello world",
                time:new Date()

            }
        },
        template:`<h2>{{ time | myTime('YYYY-MM-DD')}}</h2>
        </div>
        `,    //使用过滤器    如：         数据 | 过滤器的名字()
        
    };
----------------------------------------------------------------------------------------
    new Vue({
        el:"#app",
        data(){
            return {

            }
        },
        components:{
            App
        }
    })
</script>