vue 过滤器
vue.filter() 全局过滤器
语法:
Vue.filter(过滤器名称,callback);
callback的参数:
参数1: 要过滤的数据
参数2、3、4...... : 传递的参数
应用:
一:callback没有传递其他参数的时候
eg:
Vue.filter(reverseVal,(msg) => {
return msg.split('').reverse().join('')
})
应用: {{ msg | reverseVal }} 管道符
二:callback没有传递其他参数的时候
eg:
Vue.filter(addCode,(msg,code1,code2) => {
return '' + msg + code1 + code2;
})
应用: {{ msg | addCode }} 管道符
全局注册过滤器(封装成插件)
//创建一个filter.js import Vue from 'vue'; const globalFilters = { addHollow : (...arg) => { var argLength = arg.length; if(argLength == 1){ return arg[0] + 'hollow'; }else{ let res = ''; arg.forEach((val,index) => { res += val; }) return res; } }, reverseVal : (val) => { return val.split('').reverse().join(''); } } export default { install(Vue){ Object.keys(globalFilters).forEach((key) => { Vue.filter(key,globalFilters[key]); }) } } //在main.js中 import myFilter from './plugins/filter/filter.js'; Vue.use(myFilter); //组件内部应用: {{msg | addHollow}} 管道符 {{val | reverseVal}} 管道符
filters 局部过滤器
语法:
filters : {
reverseVal(msg){
return '' + msg.split('').reverse().join('');
},
addCode(msg){
return msg + '添加的内容';
}
}
局部过滤器应用
<template> <div id="app"> <img :src="imgSrc | changeSrc" alt=""> </div> </template> <script> export default { name:'app', data(){ return { imgSrc : 'http://p0.meituan.net/w.h/movie/d09014103dd467babc1f6ecaf607a9511579477.jpg' } }, filters : { changeSrc(src,wh){ return src.replace(/w.h/,'170.300'); } } } </script>