vue 中过滤器

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>

猜你喜欢

转载自blog.csdn.net/weixin_45677987/article/details/123359371