vue_filter的用法
vue_filter的用法
需求:
vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器,如何调用
解决方案:
定义全局filter
1 | // src/utils/filters.js |
使用全局filter
在vue实例化之前添加全局filter1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19// src/main.js
import * as filter from '@/utils/filters.js'
import mixin from '@/utils/mixin.js'
// 添加filter
Object.keys(filter).forEach(k => {
Vue.filter(k, filter[k])
})
// 启用全局mixin
Vue.mixin({
...mixin
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
在模板里使用全局filter
1 | <template> |
在methods里使用全局filter
方法一:从filters文件中只引入需要的filter
特点:把filter作为函数引入到需要的文件里1
2
3
4
5
6
7import ganderFilter from '@/utils/filters.js'
methods: {
methodA: function (gander) {
// 如下方式调用
return ganderFilter(gander)
}
}
方法二:从vue实例里获取需要的filter
特点:不需要做任何其他处理,方便 推荐使用1
2
3
4
5
6methods: {
methodA: function () {
// 如下方式调用
this.$options.filters['filter-name'](...args)
}
}
方法三:引入需要的filter到mixin里当做一个method
特点:所有vue实例上都会有这个方法 推荐使用1
2
3
4
5
6
7
8
9
10// src/utils/mixin.js
import * as filter from '@/utils/filters.js'
let mixin = {
methods: {
...filter,
methodA,
methodB
}
}
export default mixin
其实三种方法都可以