共计 3215 个字符,预计需要花费 9 分钟才能阅读完成。
在 vue2.0 之前,是有内置过滤器的,在 2.0 中曾经没有内置的过滤器了,但咱们能够自定义过滤器。
对于 vue 过滤器,在官网文档中是这样阐明的:
Vue.js 容许你自定义过滤器,可被用于一些常见的文本格式化。过滤器能够用在两个中央:双花括号插值和
v-bind
表达式 (后者从 2.1.0+ 开始反对)。过滤器应该被增加在 JavaScript 表达式的尾部,由“管道”符号批示。
即过滤器是用来格式化数据的一个函数。过滤器不会批改原始数据 ,它的作用是过滤数据,就是 对数据进行加工解决并返回解决后的数据,比方做一些数据格式上的批改,状态转换等。
过滤器分为两种
- 组件内的过滤器(组件内无效)
- 全局过滤器(所有组件共享)
定义过滤器
- 第一个参数是过滤器的名字
-
第二个参数是过滤器的性能函数 (若不定义 vue 就不晓得这个字符串是什么,有什么作用)。
过滤器的性能函数
- 申明
function(data,argv1,argv2...){}
- 第一个参数是传入的要过滤的数据,即调用时管道符右边的内容。
- 第二个参数开始往后就是调用过滤器的时候传入的参数。
- 申明
过滤器的应用
- 先注册,后应用
- 组件内
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! |
留神:
- 全局注册时是 filter 没有 s,而组件过滤器是 filters,是有 s 的,尽管写的时候没有 s 也不报错,然而过滤器是没有成果的。
- 当全局过滤器和部分过滤器名字反复的时候,会以就近准则进行调用,即:部分过滤器优先于全局过滤器被调用
- 一个表达式能够应用多个过滤器,其执行程序 从左往右,前一个过滤器的后果作为后一个过滤器的被解决数据,所以要留神应用程序
相熟 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 => {return item.code = value;}) | |
return target.length ? target[0].label : value; | |
} | |
} | |
| |
export const commonMenu = { | |
func: value => { | |
const target = Dict.COMMON_MENU.filter(item => {return item.code = 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> |