Vue过滤器（时间戳转时间）

目录

过滤器

 HTML写法：

定义过滤器:

 定义全局过滤器：

过滤器串联：

 带参数过滤器：

时间戳转时间

---

过滤器

官方地址：过滤器 — Vue.js (vuejs.org)

过滤器是指Vue.js支持在{{}}插值的尾部添加一个管道符“（|）”对数据进行过滤，

经常用于格式化文本，比如字母的大写、货币的千位使用、逗号分隔、转换时间等 

 HTML写法：

在双花括号中

{{ name | chilema }}

在 `v-bind` 中，从2.1.0后 开始支持

---

定义过滤器:

使用filters关键字来定义过滤器

这里定义的过滤器为局部过滤器，在哪定义，在哪使用。

代码实例： 

chilema方法中的value参数是双花括号中 | 左边的值

切记如果return没写，浏览器中将会什么都不会显示

    
    
    


    

        {{name|chilema}}
    

浏览器输出结果：

 定义全局过滤器：

 全局的过滤器用的不多，但是根据不同情况使用

 代码实例： 

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

    
    
    


    

        {{name|helema}}
    

浏览器输出结果：

过滤器串联：

 代码实例： 

    
    
    


    

        {{name|chilema|helema}}
    

解释：

name的值将作为参数传入到chilema中，然后将chilema的结果传递到helema中

最终显示的是最后的那个过滤器

 浏览器输出结果：

 带参数过滤器：

{{ name | chilema('arg1', arg2) }}

chilema这是有三个参数，name会是他的第一个参数，普通字符串 'arg1' 作为第二个参数，表达式arg2的值作为第三个参数。

vue代码：

chilema(value,arg1,arg2){
    return value+"，你吃了吗"
}

时间戳转时间

代码：

    
    
    


    

        {{Mytime | zhuanhuanTime01}}
        

        {{Mytime | zhuanhuanTime02}}
    

浏览器输出结果：