04、Vue.js---自定义过滤器

  

    自定义过滤器的关键字是 filter。

    官网描述：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{{ message | capitalize }}div v-bind:id='rawId | formatId'>div>

    官网中提到的 管道 的关键字是“|”，其格式是：{{ data | fun }}。

    自定义过滤器的作用：在数据显示之前，对数据进行处理包装。过滤器也分为全局过滤器（filter）和局部过滤器(filters)。具体用法见代码及注释部分：

js代码部分：

window.onload = function (){  // 定义全局过滤器  Vue.filter('test',function(data){    // 形参data的实参是管道{{ data | fun }}中 data    return data >=10;  });  new Vue({    el:'#app',    data:{      num:0,      today:new Date()    },    // 定义局部过滤器    filters:{      // 定义局部过滤器，将以为数字前补0，其他的原样输出      addZero:function(data){        return data>=10 ? data : '0'+data;      },      // 过滤器带多个参数      dateFormat:function(data,arg1,arg2){        // 可以打印 arg1/arg2 看看结果        // console.log(arg1);        // console.log(arg2);        let year = data.getFullYear();        let m = data.getMonth()+1;        let day = data.getDate();        return year+arg1+m+arg1+day;      }    }  });}

html代码部分：

body>  div id='app'>    input type='text' v-model='num'>    div>{{ num }}div>        p>通过全局过滤器 test 判断 num 是否 >=10p>    div>{{ num | test }}div>    hr/>    p>通过局部过滤器 addZero，将以为数字前补0，其他的原样输出p>    div>{{ num | addZero }}div>    hr/>    p>        管道前的参数永远都是过滤器方法的第一个参数，br/>        过滤器方法括号中所定义的参数，以第二位参数开始向后顺序排列    p>    div>{{ today | date-format('-','参数二') }}div>  div>body>

 

至此，完毕。感谢您的阅读。

 

作者：秋季长青