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

    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 的值作为第三个参数。

  • 相关阅读:
    pysocketserver
    协程
    py模块和包
    py网络编程
    GridView绑定技巧终结者
    iOS 证书/私钥/代码签名/描述文件
    八拜之交
    POJ3230(Travel)
    POJ2553(The Bottom of a Graph)
    动态规划的实质
  • 原文地址:https://www.cnblogs.com/panax/p/10824594.html
Copyright © 2011-2022 走看看