vue 之 過濾器 filter

過濾器(filter)

1.概念

• vue 中的過濾器(filter) :數據格式化
• 也就是說,讓數據按照我們規定的一種格式輸出
• 比如 : 對於日期來說,將日期格式轉化爲`年-月-日 小時:分:秒` 格式的過程

// 直接顯示
<h1>{{ data }}</h1>
顯示 : 2019-06-05T16:43:23.490Z  
不是我們想要的
我們想要 :2019-06-05 16:43:23

2. 全局過濾器和局部過濾器

• 說明 : 通過全局方式創建的過濾器,在任何一個Vue實例中都可以使用(一般情況下,爲了項目方便管理,都是一個vue實例)
• 注意點 :  使用全局過濾器的時候,應該創建全局過濾器,再創建Vue實例
• 局部創建的過濾器 只能在當前vue實例中使用

3. 怎麼註冊全局過濾器

// 第一個參數 : 過濾器的名字
// 第二個參數 : 是一個回調函數,只要使用過濾器的時候,這個回調函數就會執行
//  通過回調函數的返回值得到格式化後的數據
Vue.filter('data',res=>{
    return '哈哈'
})

4. 使用過濾器  示例

// 組件 
<h1>時間戳-格式 {{ date2 | date }}</h1>

//js
Vue.filter('date',res => {
    return `${res.getFullYear()}-${res.getMonth()}-${res.getDate()} ${res.getHours()}:${res.getMinutes()}:${res.getSeconds()}`
})

5. moment 插件

• 使用 :  1 . 安裝  :  npm i moment      2. 引入 :       3 . 使用 :
• 日期  =>  指定格式  `moment(res).format('YYYY-MM-DD HH-mm-ss') `
• 時間戳  =>  指定格式  `moment(res).format('YYYY-MM-DD HH-mm-ss') ` 

• // 全局 
  Vue.filter('date',res=>{
      return moment(res),format('YYYY-MM-DD HH-mm-ss')
  })

   

6. 參數問題

• 示例

<h1>時間戳-格式 {{ date2 | date('YYYY-MM-DD HH-mm-ss',888) }}</h1>

// 默認值
Vue.filter('date', (res, format = 'YYYY-MM-DD', arg) => {
  console.log(arg)
  return moment(res).format(format)
})

7. 局部過濾器

在vm的配置項裏寫一個 filters

對應的是一個對象

filter:{
    date(res,format='YYYY-MM-DD',arg ){
        return moment(res).format(format)
    }
}