作用

对数据进行简单的处理

1. 定义全局过滤器

• 项目内的所有文件均可使用全局过滤器

将传入的value值，处理为首字母大写的字符串

main.js

//全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

2. 定义局部过滤器

• 只有定义局部过滤器的文件可以使用该局部过滤器 filters 作为一个与data()，methods：{} 同级的属性。里面可以定义多个局部过滤器

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

3. 使用过滤器

index.vue

// 方式一
{{ message | capitalize }}
// 方式二
<div v-bind:id="rawId | formatId"></div>

管道符 前面是原始数据

管道符 后面是过滤器

管道符前面的原始数据是 过滤器的默认参数，也是必传参数

过滤器的形参value首先接收 管道符前面的原始数据

message | capitalize 等价于 capitalize（message）

补充应用场景

filter对码值进行转义 js中

filters: {
  resolveState: function (value) {
    const stateObj={
        '0':'已提交',
        '1':'审核中',
        '2':'审核通过',
        '3':'被驳回'
    }
    return stateObj[value]
  }
}

模板中

{{ state | resolveState }}

当state为‘1’时，页面会显示‘审核中’