自定义过滤器的关键字是 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>
至此,完毕。感谢您的阅读。
作者:秋季长青
联系客服