vue自定义过滤器的创建和使用

1、简单介绍

 

过滤器的作用：实现数据的筛选、过滤、格式化。

 

过滤器的本质是一个有参数，有返回值的方法。

 

过滤器可以用在两个地方：双花括号插值和v-bind表达式（后者从2.1.0+开始支持）。其中’管道’符号后面的是过滤器，前面的是需要格式化的值。

 

<!-- 在双花括号中 -->
{{ message | capitalize }}
 
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

 

vue1.*版本是有内置的过滤器，但是vue2.*所有版本都已经没有自带的过滤器了。

 

2、创建和使用

 

组件（局部）过滤器：

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

 

全局过滤器（1）：

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

 

全局过滤器（2）：

将所有方法定义在一个文件里面导出：/src/api/filters.js

// 第一个参数都是默认传入的值，第二开始都是手动传入的参数
const test1 = val => {
return val * 2
}
 
const test2 = (val, num = 0) => {
return val * num
}
 
export { test1, test2 }

 

然后在入口文件main.js中引入：

import * as filters from './api/filters'
 
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

 

然后再需要的页面使用：

<template>
<div>
<h1>测试filters</h1>
<p>{{ num | test1 }}</p>
<p>{{ num | test2 }}</p>
<p>{{ num | test2(3) }}</p>
<div v-bind:id="num | test2(4)">111111111</div>
</div>
</template>
<script>
export default {
data () {
return {
num: 2
}
}
}
</script>

 

效果如下：