vue过滤器

vue自定义过滤器

过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
vue中的过滤器分为两种：全局过滤器和局部过滤器

全局过滤器

Vue.filter('formatePrice', (val) => {
    return val.toFixed(2)
})
// 使用
{{13.44 | formatePrice}} 

 
 

局部过滤器

<script>
	export default {
		data() {
			return {}
		},
		filters: { 
	    formateTime(val) {
	      let date = new Date(val)
	      let year = date.getFullYear()
	      let month = date.getMonth() + 1
	      let day = date.getDate()
	      return `${year}/${month}/${day}`
	    }
	  }
	}
</script>

 
 

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

{{13.44 | formatePrice}}

 
 

<div v-bind:data="13.44 | formatePrice"></div>

 
 

过滤器可以串联

{{ 13.4466 | formatePrice | add}}	输出 14.45
filters:{
	add(val) {
		return Number(val) + 1
	}
}

 
 

过滤器参数

{{ 13.44 | sum(1,2) }}
filters:{
    sum(val,a,b) {
        console.log(val,a,b);	// 13.44, 1, 2
    }
}

 
 

小案例：

给出一个时间，可以显示出 几天前、几分前。。。

  filters:{
    filterTime(val) {
      let old = new Date(val).getTime()
      let now = new Date().getTime()
      let subTime = (now-old)/1000   // 时间单位s
      let m = 60
      let h = m*60
      let d = h*24
      let result = ''
      if(parseInt(subTime/d)>=1) {
        result = `${parseInt(subTime/d)}天前`
      } else if(parseInt(subTime/h)>=1) {
        result = `${parseInt(subTime/h)}小时前`
      } else if(parseInt(subTime/m)>=1) {
        result = `${parseInt(subTime/m)}分钟前`
      } else {
        result = `${parseInt(subTime/m)}秒前`
      }
      return result
    }