【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菌做好朋友