zoukankan      html  css  js  c++  java
  • 25、vue 过滤器filter的详解

    vue 过滤器filter的详解

    https://www.cnblogs.com/panax/p/10824594.html

     

    1.代码运用的地方

    <!-- 在双花括号中 -->
    {{ date | formatDate}}
    
    <!-- 在 `v-bind` 中 -->
    <div v-bind:id="data | formatDate"></div>

    2.场景: 时间格式的转化

    3. 注册过滤器函数

    首先定义过滤器有两种方式,第一种是全局过滤器,我们可以直接在vue对象上使用filter方法注册过滤器,这种全局注册的过滤器在任何一个组件内都可以使用。第二种则是组件内部的过滤器,注册组件内部过滤器则只能在当前组件内使用,接下来我们使用这两种方式注册过滤器函数。

    复制代码
    // 全局函数

    Vue.filter('formatTime', function (value) { const date = new Date(val); const hour = date.getHours(); const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    return `${hour} : ${minutes} : ${seconds}`;
    })

    复制代码

    组件内:

     4. 过滤器可以串联:

    {{ message | filterA | filterB }}

    5. 接收参数 

    {{ message | filterA('arg1', arg2) }}

    filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

    作者:人参,每篇随笔

  • 相关阅读:
    Javascript高性能编程-提高Dom访问速度
    获取在线人数
    js倒计时
    支付宝支付
    微信扫码支付
    多条sql语句实现事物处理
    防止页面重复刷新
    bootstrapTable.js 使用
    org_chart.js 使用方法
    js上传图片及时显示
  • 原文地址:https://www.cnblogs.com/dream111/p/13499370.html
Copyright © 2011-2022 走看看