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