Vue入门指南——过滤器

深藏阁楼爱情的钟 2023-07-02 07:28 73阅读 0赞

目录：

    • 一、过滤器的作用是什么？
    • 二、自定义全局过滤器
    • 三、 全局过滤器的使用
    • 四、局部过滤器
    • 五、带参数的过滤器
    • 六、带参过滤器的使用
    • 七、注意事项

一、过滤器的作用是什么？

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

二、自定义全局过滤器

过滤器中的 function 里的第一个参数，已经被规定死了，永远都是 过滤器 管道符前面传递过来的数据。

  1. Vue.filter(‘过滤器名称’, function(value){ 
  2.     // 过滤器业务逻辑
  3. })

三、 全局过滤器的使用

过滤器可以用在两个地方： 插值表达式 和 v-bind 表达式。

  1. <div>{ { msg | upper}}</div> 
  2. <div>{ { msg | upper | lower}}</div> 
  3. <div v-bind:id=“id | formatId"></div>
  1. // 定义一个全局过滤器
  3. Vue.filter('dataFormat', function (input, pattern = '') { 
  5.   var dt = new Date(input);
  7.   // 获取年月日
  9.   var y = dt.getFullYear();
  11.   var m = (dt.getMonth() + 1).toString().padStart(2, '0');
  13.   var d = dt.getDate().toString().padStart(2, '0');
  17.   // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
  19.   // 否则，就返回 年-月-日 时：分：秒
  21.   if (pattern.toLowerCase() === 'yyyy-mm-dd') { 
  23.     return `${ y}-${ m}-${ d}`;
  25.   } else { 
  27.     // 获取时分秒
  29.     var hh = dt.getHours().toString().padStart(2, '0');
  31.     var mm = dt.getMinutes().toString().padStart(2, '0');
  33.     var ss = dt.getSeconds().toString().padStart(2, '0');
  37.     return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`;
  39.   }
  41. });

四、局部过滤器

  1. filters:{ 
  2.     capitalize: function(){ }
  3. }

  1. HTML元素：

    { { item.ctime | dataFormat(‘yyyy-mm-dd’)}}

  2. 私有 filters 定义方式：

    filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

    1. dataFormat(input, pattern = "") {  // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错
    3.   var dt = new Date(input);
    5.   // 获取年月日
    7.   var y = dt.getFullYear();
    9.   var m = (dt.getMonth() + 1).toString().padStart(2, '0');
    11.   var d = dt.getDate().toString().padStart(2, '0');
  1.       // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日
  3.       // 否则，就返回 年-月-日 时：分：秒
  5.       if (pattern.toLowerCase() === 'yyyy-mm-dd') { 
  7.         return `${ y}-${ m}-${ d}`;
  9.       } else { 
  11.         // 获取时分秒
  13.         var hh = dt.getHours().toString().padStart(2, '0');
  15.         var mm = dt.getMinutes().toString().padStart(2, '0');
  17.         var ss = dt.getSeconds().toString().padStart(2, '0');
  21.         return `${ y}-${ m}-${ d} ${ hh}:${ mm}:${ ss}`;
  23.       }
  25.     }
  27.   }

五、带参数的过滤器

  1. Vue.filter(‘format’, function(value, arg1){ 
  2.     // arg1就是过滤器传递过来的参数
  3. })

六、带参过滤器的使用

  1. <div>{ { date | format(‘yyyy-MM-dd')}}</div>

七、注意事项

  • 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示。
  • 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。
  • 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的。
  • 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

如果您也正在学习前端的路上，记得关注该博主，学习更多关于前端的知识~

博主主页 Poetic Code

发表评论

表情：
评论列表 （有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 风格指南快速入门

    Vue 官方在最近发布了代码风格指南的BETA版本，旨在引导开发者以正确的方式来书写代码，避免因为不规范而导致的问题。这对于新手开发者来说，只要遵循风格指南的内容，就可以避免很

    你的名字你的名字/ 0 赞/ 376 阅读

    相关 vue.js新手入门指南

    最近项目需要用到前端的vue框架，而我之前完全没有接触过前端的东西，刚开始搜索vue的相关介绍，被vue一些全家桶给整蒙了，对于vue，vue-router，vuex，axio

    短命女短命女/ 0 赞/ 425 阅读