如何使⽤vue过滤器filter
⽬录
概述
定义过滤器
过滤器的使⽤
⾃定义全局过滤器
局部过滤器
注意事项
⽰例⼀（局部过滤器）
⽰例⼆（全局过滤器）
概述
在 vue2.0 之前，是有内置过滤器的，在2.0中已经没有内置的过滤器了，但我们可以⾃定义过滤器。
关于 vue 过滤器，在官⽅⽂档中是这样说明的：
Vue.js 允许你⾃定义过滤器，可被⽤于⼀些常见的⽂本格式化。过滤器可以⽤在两个地⽅：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始⽀持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指⽰。
即过滤器是⽤来格式化数据的⼀个函数。过滤器不会修改原始数据，它的作⽤是过滤数据，就是对数据进⾏加⼯处理并返回处理后的数据，⽐如做⼀些数据格式上的修改，状态转换等。
过滤器分为两种
组件内的过滤器(组件内有效)
全局过滤器(所有组件共享)
定义过滤器
第⼀个参数是过滤器的名字
filter过滤对象数组第⼆个参数是过滤器的功能函数 (若不定义vue就不知道这个字符串是什么，有什么作⽤)。
过滤器的功能函数
声明 function(data,){}
第⼀个参数是传⼊的要过滤的数据，即调⽤时管道符左边的内容。
第⼆个参数开始往后就是调⽤过滤器的时候传⼊的参数。
过滤器的使⽤
先注册，后使⽤
组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据
全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据
使⽤ {{ 数据 | 过滤器名 }}
// 使⽤过滤器时需要添加管道符号（ | ）作为分隔，管道符 | 右边是过滤器名称，即⽂本的功能函数
<!-- 在双花括号中 -->
{{ message | 过滤器名称 }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="id | 过滤器名称"></div>
⾃定义全局过滤器
Vue.filter('过滤器名称', function(val) { // val表⽰要被处理的数据
// 过滤器业务逻辑，要有返回值
})
<div>{{ msg | 过滤器名称 }}</div>
<div v-bind="msg | 过滤器名称"></div>
局部过滤器
data () {
return {
msg: 'hello world'
}
},
//定义私⽤局部过滤器。只能在当前 vue 对象中使⽤
filters: {
dataFormat: (msg, a) => { // msg表⽰要过滤的数据，a表⽰传⼊的参数
return msg + a;
}
}
<p>{{ msg | dataFormat('!')}}</p> // 结果: hello world!
注意事项
1.全局注册时是 filter 没有 s ，⽽组件过滤器是 filters，是有 s 的，虽然写的时候没有 s 也不报错，但是过滤器是没有效果的。
2.当全局过滤器和局部过滤器名字重复的时候，会以就近原则进⾏调⽤，即：局部过滤器优先于全局过滤器被调⽤
3.⼀个表达式可以使⽤多个过滤器，其执⾏顺序从左往右，前⼀个过滤器的结果作为后⼀个过滤器的被处理数据，所以要注意使⽤顺序
熟悉 vue 的童鞋会知道，过滤器有时同methods、computed、watch⼀样可以达到处理数据的⽬的，但⼜不能替代它们，因为它不能改变原始值。如果⼀个过滤器的内部特别复杂，可以考虑把它写成⼀个计算属性，因为计算属性本⾝带有缓存，可复⽤性强，⽽过滤器⼀般⽤来做⼀些简单的操作。
在实际开发中，全局的过滤器要⽐局部过滤器使⽤的更⼴泛⼀些，说⽩了我们为什么要使⽤过滤器，其实就跟使⽤函数是⼀样，把⼀些⽅法封装，供其它组件使⽤，这样调⽤起来更⽅便也更快捷。
⼤家知道全局过滤器是在 main.js 中定义的，但万⼀项⽬过⼤，有多个过滤器，那 main.js 就⼀堆代码，为了项⽬模块化，最好是有专门的⽬录来统⼀存放这些过滤器，然后把处理函数给抽离出去，放在⼀个.js⽂件中，下边通过⽰例代码展⽰。
⽰例⼀（局部过滤器）
格式化时间或⽇期，补全指定位数，不⾜个位数补0
// filter/index.js⽂件
export default {
dateFormat: value => {
const dt = new Date(value * 1000)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定位数，"要补全的符号或值")
const d = (dt.getDay() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
// 在 .vue ⽂件中使⽤局部过滤器
<script>
import filters from '../filter'
export default {
... ...
filters: { ...filters },
data() {
return {}
}
}
</script>
<div> ⽇期：{{ date | dateFormat }} </div>
⽰例⼆（全局过滤器）
通⽤字典项的回显：⽐如性别男⼥或通⽤选择是否，后端传给我们的数据是0、1，我们需要在页⾯上显⽰男⼥或是否
// constants/dictionary.js ⽂件
export const GENDER_MENU = [
{ code: 0, label: '男'},
{ code: 1, label: '⼥'}
];
export const COMMON_MENU = [
{ code: 0, label: '否'},
{ code: 1, label: '是'}
];
export default {
GENDER_MENU, COMMON_MENU
}
filter / dict.js ⽂件
/
/ filter/dict.js ⽂件
import Dict from '../constants/dictionary'
export const genderMenu = {
func: value => {
const target = Dict.GENDER_MENU.filter(item => {
de = value;
})
return target.length ? target[0].label : value;
}
}
export const commonMenu = {
func: value => {
const target = Dict.COMMON_MENU.filter(item => {
de = value;
})
return target.length ? target[0].label : value;
}
}
filter / index.js ⽂件
// filter/index.js ⽂件
import * as filters from './dict' // 导⼊过滤函数
const Install = Vue => {
/
/ 导⼊的 filters 是⼀个对象，使⽤Object.keys()⽅法，得到⼀个由key组成的数组，遍历数据，让key作为全局过滤器的名字，后边的是key对应的处理函数，这样在任何⼀个组件中都可以使⽤全局过滤器了 Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key].func)
})
/*
for(const _filter in filters) {
Vue.filter(`${_filter}`, filters[_filter].func)
} */
}
export default Install
main.js ⽂件
// main.js ⽂件
... ...
import filters from './../filter/index'
Vue.use(filters)
... ...
在.vue ⽂件中使⽤全局过滤器
// .vue ⽂件中使⽤全局过滤器
<p>性别：{{ gender | genderMenu }}</p>
以上就是如何使⽤vue过滤器filter的详细内容，更多关于vue过滤器filter的资料请关注其它相关⽂章！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论