Vue学习笔记【12】——过滤器

概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;

私有过滤器

  1. HTML元素:

 <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. 私有 filters 定义方式:

 filters: { // 私有局部过滤器,只能在 当前 VM 对象所控制的 View 区域进行使用
 ​
     dataFormat(input, pattern = "") { // 在参数列表中 通过 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}`;
 ​
       }
 ​
     }
 ​
   }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串;

全局过滤器

// 定义一个全局过滤器
 ​
 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}`;
 ​
   }
 ​
 });
 ​

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!

上一篇:时间格式化


下一篇:BZOJ5261 Rhyme