vue之filter过滤器

简介：

vue可自定义filter过滤器，对数据进行过滤操作（不改变原始数据，只对数据加工处理返回过滤后的数据），功能雷同computed

注册

1、全局注册filter

// formatNumber---过滤器名字
// val  ----需要过滤的数据
// ...args  ----传进去的参数
Vue.filter('formatNumber',(val,...args)=>{
    return parseFloat(val).toFixed(2); // 截取2位小数
  })
 // 若有多个过滤器，可建文件filters,在main.js中引入并全局注册
import * as filters from '../src/filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

2、局部注册filters

<template>
  <p>{{ number| formatNumber}}</p>
</template>

<script>
  export default {
   data: function () {
    return{
      number:2.3333333
    }
  },
    filters: {
      formatNumber(value) {
         return parseFloat(value).toFixed(2); // 截取2位小数
      }
    }
  }
</script>

使用

// 1、花括号
{{number | formatNumber}}
// 2、v-bind
<div :id="number | formatNumber"></div>
// 3、过滤器串联,用管道符|分开，执行顺序从左到右
{{msg| filterA | filterB}}
// 4、过滤器传参数
{{msg| filterA(arg1,arg2)}}

应用场景

单位转换、格式化数据、时间格式化、文本处理等
比如给金额添加单位，比如将后台返回的数据进行中文转换。

其他说明

1. 同名过滤器，优先执行局部过滤器
2. 全局注册是filter,局部注册是filters
3. vue3已废弃filter，使用computed可实现类似功能