vue中的过滤器 filter 旧城等待, 2022-01-12 07:39 219阅读 0赞 **一、vue过滤器概念** \+ 概念:Vue.js 允许你自定义过滤器,\*\*可被用作一些常见的文本格式化\*\*。 \+ 过滤器可以用在两个地方:\*\*mustache 插值和 v-bind 表达式\*\*。 \+ 过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示; \+ 做输出前,最后一层包装的处理。 \+ 例如:list | 过滤器 **二、私有过滤器** 私有 `filters` 定义方式: 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用 filters: { // 在参数列表中 通过 pattern="" 来指定形参默认值,防止报错 dataFormat(input, pattern = "") { var dt = new Date(input); // 获取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日 // 否则,就返回 年-月-日 时:分:秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 获取时分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } } } HTML元素: <td>{ {item.ctime | dataFormat('yyyy-mm-dd')}}</td> 注:补足位数:**使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串;** **三、全局过滤器** 全局:所有的vue都可以使用。 // 定义一个全局过滤器 Vue.filter('dataFormat', function (input, pattern = '') { var dt = new Date(input); // 获取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 传递进来的字符串类型,转为小写之后,等于 yyyy-mm-dd,那么就返回 年-月-日 // 否则,就返回 年-月-日 时:分:秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 获取时分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } }); 注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
还没有评论,来说两句吧...