vue 中过滤器

这篇博客介绍了在 Vue.js 中如何实现过滤器,包括局部过滤器和全局过滤器的创建。通过示例展示了如何使用过滤器来格式化时间,并解释了过滤器在模板表达式中的工作原理,以及如何串联多个过滤器。文章还提到了过滤器在实际项目中的应用,特别是在处理数据格式化方面的价值。
摘要由CSDN通过智能技术生成
vue 中过滤器实现: 
 在script 脚本中引用: 
  <script type="text/javascript" src="../js/dayjs.min.js"></script>
  <div id="root">
    <h2>显示格式化之后的时间</h2>
     // 计算属性实现
    <h2>显示格式化之后的时间</h2>
      methods 实现
    <h2>显示格式化之后的时间</h2>
     // 过滤器实现
     <h2>显示格式化之后的时间</h2>
     <h3>现在是: {{time | timeFormatter}}</h3>
  </div>

  <script>

    // 局部过滤器(局部过滤器就是在当前创建的vue 的实例对象上使用, 配置项就是filters)
    // 过滤器的本质就是函数 | 过滤器的符号就是 | 管道符  把前边的参数当做后边过滤器的参数进行传递。
    filters: {
      timeFormatter() {
        return (返回值就可以把插值表达式中的值替换掉)
      }
    }

    过滤器的第一个参数就是亘古不变的 | 管道符之前的数据
    可以实现多个过滤器的串联,  filters 可以实现对各过滤器的串联: 
    
    但是定义为全局过滤器 直接定义在vue身上 vue.filter('myslice', function(value) {
       return value.slice(0, 4)
    })

    全局过滤器必须在new vue 实例对象之前
  </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值