VUE filters 使用

什么是filters?
filters 翻译就是 过滤器，vue 官网表示，它就类似个格式化的工具
比如你渲染后端数据到标签，后端给你个时间戳，你需要自己去转换，那么如果不用filters，你就得在请求到数据时候去改变这个值，最后才是渲染上去；
如果你用了filters，那么你就可以直接在标签上面，通过 “管道符” —> “|” 来使用

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
如 :

//双花括号插值
{{ time | dateFormat}}

//v-bind 表达式 
<div v-bind:time"time | dateFormat"></div>

在页面JS中定义filters，与data同级

filters: {
  dateFormat: function (time) {
      var re = /-?\d+/
      var m = re.exec(time)
      var d = new Date(parseInt(m[0]))
      var o = {
        'M+': d.getMonth() + 1,
        'd+': d.getDate(),
        'h+': d.getHours(),
        'm+': d.getMinutes(),
        's+': d.getSeconds(),
        'q+': Math.floor((d.getMonth() + 3) / 3),
        'S': d.getMilliseconds()
      }
      var format = 'yyyy-MM-dd mm:ss'
      if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
        }
      }
      return format
    }
}

这是局部定义过滤器的，还可以全局定义

新建filters.js，定义个对象，对象里面就是具体方法，最后抛出

const filterFun = {

	/* 格式化时间 */
	dateFormat: function(time) {
		var re = /-?\d+/
		var m = re.exec(time)
		var d = new Date(parseInt(m[0]))
		var o = {
			'M+': d.getMonth() + 1,
			'd+': d.getDate(),
			'h+': d.getHours(),
			'm+': d.getMinutes(),
			's+': d.getSeconds(),
			'q+': Math.floor((d.getMonth() + 3) / 3),
			'S': d.getMilliseconds()
		}
		var format = 'yyyy-MM-dd mm:ss'
		if (/(y+)/.test(format)) {
			format = format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
		}
		for (var k in o) {
			if (new RegExp('(' + k + ')').test(format)) {
				format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[
					k]).length))
			}
		}
		return format
	}
}

export default filterFun

然后在main.js中引入，并注册

import Vue from 'vue'
import filters from './util/filters.js'


// 将filters.js中的所有过滤器都注册
for (let key in filters) {
  Vue.filter(key, filters[key])
}

最后页面使用

	<div>
	  <div>不加过滤器：{{time}}</div>
	  <div>加过滤器后：{{ time | dateFormat}}</div>
	</div>

写的有问题欢迎指正