【Vue】基础系列(十)过滤器 - Vue.filter - moment.js

语言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信号: yk2012yk2012,微信公众号:ykyk2012]

「这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战

今天我们主要来学习Vue中的过滤器Vue.filter

1. 理解过滤器

定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。

语法: 1. 注册过滤器:Vue.filter(name,callback)new Vue{filters:{}} 2. 使用过滤器:{{ xxx | 过滤器名}}v-bind:属性 = "xxx | 过滤器名"

备注: 1. 过滤器也可以接收额外参数、多个过滤器也可以串联 2. 并没有改变原本的数据, 是产生新的对应的数据

2. 编码

1). 定义过滤器

全局过滤器 javascript Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue })

局部过滤器 javascript new Vue{ filters:{ filterName(value){ return newValue } } }

2). 使用过滤器

```html

{{myData | filterName}}
{{myData | filterName(arg)}}

```

示例

```html

显示格式化的日期时间

{{date}}

完整版:{{date | dateString}}

年月日:{{date | dateString('YYYY-MM-DD')}}

时分秒:{{date | dateString('HH:mm:ss')}}

``` 在这里插入图片描述

使用dayjs ```html

过滤器

显示格式化后的时间

现在是:{{fmtTime}}

现在是:{{getFmtTime()}}

现在是:{{time | timeFormater}}

现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}

尚硅谷

{{msg | mySlice}}

``` 在这里插入图片描述

moment.js

其中使用到了moment.js 中文网 http://momentjs.cn/

在这里插入图片描述

引入

```html

```

用法

  1. 日期格式化 javascript moment().format('MMMM Do YYYY, h:mm:ss a'); // 一月 25日 2021, 9:51:41 晚上 moment().format('dddd'); // 星期一 moment().format("MMM Do YY"); // 1月 25日 21 moment().format('YYYY [escaped] YYYY'); // 2021 escaped 2021 moment().format(); // 2021-01-25T21:51:41+08:00
  2. 相对时间 javascript moment("20111031", "YYYYMMDD").fromNow(); // 9 年前 moment("20120620", "YYYYMMDD").fromNow(); // 9 年前 moment().startOf('day').fromNow(); // 1 天前 moment().endOf('day').fromNow(); // 2 小时内 moment().startOf('hour').fromNow(); // 1 小时前
  3. 日历时间

javascript moment().subtract(10, 'days').calendar(); // 2021/01/15 moment().subtract(6, 'days').calendar(); // 上星期二21:51 moment().subtract(3, 'days').calendar(); // 上星期五21:51 moment().subtract(1, 'days').calendar(); // 昨天21:51 moment().calendar(); // 今天21:51 moment().add(1, 'days').calendar(); // 明天21:51 moment().add(3, 'days').calendar(); // 下星期四21:51 moment().add(10, 'days').calendar(); // 2021/02/04 4. 多语言支持

javascript moment.locale(); // zh-cn moment().format('LT'); // 21:51 moment().format('LTS'); // 21:51:41 moment().format('L'); // 2021/01/25 moment().format('l'); // 2021/1/25 moment().format('LL'); // 2021年1月25日 moment().format('ll'); // 2021年1月25日 moment().format('LLL'); // 2021年1月25日晚上9点51分 moment().format('lll'); // 2021年1月25日 21:51 moment().format('LLLL'); // 2021年1月25日星期一晚上9点51分 moment().format('llll'); // 2021年1月25日星期一 21:51

最后,欢迎关注我的专栏,和YK菌做好朋友