文章目录

• 前言
• 一、过滤器是什么？
• 二、定义过滤器
• • 1.本地过滤器
  • 2.全局过滤器
  • • 1.创建filters.js 文件
    • 2.注册全局过滤器
• 三、使用
• • 1.在{ { }}花括号中使用
  • 2.在v-bind 表达式
  • 3.串联
  • 4.接受额外参数
• 总结

前言

在实际的开发中，接口返回的数据中通常包含了很多状态，这些状态的值通常都是以数字或者字符表示，比如：type : " 01 "，假设00代表未开始，01代表进行中，02代表已结束；
那么拿到接口的数据后，不想改变这个数据的值，只是显示对应的文字；或者对这个数据进行处理之后再使用，这时就可以vue的过滤器

提示：以下是本篇文章正文内容，下面案例可供参考

一、过滤器是什么？

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

二、定义过滤器

1.本地过滤器

代码如下（示例）：
这个示例是官网示例。这个过滤器的作用，将一个纯字母字符串的第一个字母变成大写
在vue文件中定义本地过滤器

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

使用

{ { message | capitalize }}
结果：Tom

2.全局过滤器

1.创建filters.js 文件

在src下创建一个filters文件夹，并在下面创建一个js文件filters.js
创建位置与名称都可以随便命名，不过为了顾名思义，最好还是叫filters

filters.js如下

	export function type(val){ 
    var value = ''
    switch(val){ 
        case '00':
            value = '未开始'
        break
        case '01':
            value = '进行中'
        break
        case '02':
            value = '已结束'
        break
    }
    return value
}

export function isEnd(val){ 
    var value = ''
    switch(val){ 
        case '0000':
            value = '是'
        break
        case '02':
            value = '否'
        break
    }
    return value
}

//还可以定义多个function，看自己需求
//..............

2.注册全局过滤器

在main.js引用filters.js 一定要引用才生效

import * as filters from './filters/filters'  //引用。相对路径根据你创建的位置与名称自行修改

console.log('filters------',filters)
//在Vue实例创建之前注册全局过滤器
Object.keys(filters).forEach(key => { 
  Vue.filter(key, filters[key])
})

//Vue实例
new Vue({ 
  router,
  store,
  render: h => h(App)
}).$mount("#app");

附上：过滤器官方文档

Vue.filter(str, fun)方法

参数

• str----类型：string。过滤器的名称
• fun—类型：Function。处理str的函数

用法

// 注册
Vue.filter(‘my-filter’, function (value) {
// 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter(‘my-filter’)

三、使用

1.在{ { }}花括号中使用

data() { 
    return { 
      test1 : '01',  //模拟接口数据
      test2 : '02'   //模拟接口数据
    }
  },

html模板中：

<div>{
  {test1 | orderType}}</div>
<div>{
  {test2 | isEnd}}</div>

test1的值是字符串
|是Vue.js固定语法格式，管道标识，后面跟的就是过滤器
orderType和isEnd就是定义在filters.js中的过滤器的名字。

上述表达式的含义：|前的字符串会被作为后面参数传入到过滤器中，最后的返回值会显示在页面中。

2.在v-bind 表达式

<div v-bind:id="test3 | orderType"></div>

3.串联

{ { test | filterA | filterB}}

filterA与filterB定义为接收一个参数的过滤器
test作为参数传入到filterA function中，这个函数的返回值再作为参数，传入filterB中，filterB的返回值作为这个表达式的结果显示在页面中。

4.接受额外参数

{ { message | filterA(‘arg1’, arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。

总结

以上就是今天要讲的内容，本文简单介绍了vue.js 过滤器的使用