vue.js 過濾器

vue的過濾器能夠用來對數據進行格式化

1.過濾器註冊

過濾器註冊分爲全局註冊和局部註冊
(1)全局註冊：全部的組件中都能使用
語法：Vue.filter(過濾器名稱,回調函數)
回調函數的參數就是須要過濾處理的數據

//入口文件 main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.filter('toUpperCase',function(val){
  return val.toUpperCase()
})

(2)局部註冊：只能在該組件中使用
在組件中添加filters屬性，他的值是一個對象。key就是過濾器名稱，他的值爲回調函數。

<script>
export default {
  data() {
    return {
      msg:"good day"
    }
  },
  filters:{
    toUSD:function(val){
      return "$" + val
    }
  }
}
</script>

2.過濾器的調用

語法： data | 過濾器名稱
過濾器支持串聯： data | 過濾器1 | 過濾器2

<template>
<div id="app">
    <p>{{msg}}</p>
    <!-- 使用全局註冊的過濾器 -->
    <p>轉換爲大寫 -- {{msg | toUpperCase}}</p>
    <!-- 使用局部註冊的過濾器 -->
    <p>添加$前綴 -- {{msg | toUSD}}</p>
    <!-- 過濾器串聯 -->
    <p>過濾器串聯 -- {{msg | toUpperCase | toUSD}}</p>
</div>
</template>

PS:過濾器除了能夠在{{}}中使用外，還能夠在v-bind/v-html中使用

3.實例 格式化時間日期

使用第三方插件moment.js來對日期進行格式化
引入插件

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

使用npm

npm install moment --save

//引入moment
import moment from 'moment'

基本使用：

//註冊全局過濾器
import Vue from 'vue'
import moment from 'moment'

Vue.filter('dateFormat',function(val){
  //引入moment後就可使用moment這個對象，它自己也是一個函數
  return moment(val).format();
})

//App組件  date = new Date()
<template>
<div id="app">
    <!-- 原始格式: -->
    <p>{{date}}</p>
    <!-- 使用moment過濾: -->
    <p>{{date | dateFormat}}</p>
</div>
</template>

渲染結果：

Fri Nov 08 2019 23:15:02 GMT+0800 (中國標準時間)
2019-11-08T23:15:02+08:00

過濾器函數還能夠接收自定義的參數
moment的format函數能夠根據傳入的參數來控制數據輸出的格式，詳見
http://momentjs.cn/

Vue.filter('dateFormat',function(value,format){
    return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss');
})

使用實例

<div id="app">
    <p>原始格式:{{date}}</p>
    <p>默認格式:{{date | dateFormat}}</p>
    <p>只顯示年月日：{{date | dateFormat('YYYY-MM-DD')}}</p>
    <p>只顯示時分秒：{{date | dateFormat('HH:mm:ss')}}</p>
</div>

渲染結果:

原始格式:Sat Jul 06 2019 11:47:46 GMT+0800 (中國標準時間)
默認格式:2019-07-06 11:47:46
只顯示年月日：2019-07-06
只顯示時分秒：11:47:46