Vue基础补充之过滤器的使用以及日期过滤器的封装

Vue基础补充之过滤器的使用以及日期过滤器的封装

一：过滤器的基本使用

1.1：什么是vue中的过滤器

1. filter 使用场景：在data中的数据格式，例如（货币、时间、大小写）需要格式化的时候使用
2. 在vue中过滤器分为全局过滤器和局部过滤器，他们的定义语法也各不相同

1.2：基本语法

1.2.1：全局过滤器的基本语法

这是在vue中创建一个简单过滤器的方法
描述：…val表示可以传多个值

Vue.filter("price",function(value,...val){
   
    console.log(val[0]);
   return value.toFixed(val[0]);
})
Vue.filter("addText",function(value,text){
   
   return text+value;
})

1.2.2：局部过滤器的基本语法

局部过滤器直接在Vue实例中的filters中定义过滤方法

  //Vue.filter("price",(value,val)=>value.toFixed(val))
        var vm = new Vue({
   
            el: "#app",
            data: {
   
                money: 100,
                msg:"hello"
            },
            methods: {
   
            },
            filters: {
   
                upper:function(value,text){
   
                    return value.toUpperCase()+text;
                },
                
            }
        });

1.2.3：利用插值语法使用过滤器

    <div id="app">
        {
   {
   money|price(1)|addText("￥")}}
        <br