Vue.js 过滤器的基本使用(filter)
vue中的过滤器分为两种:局部过滤器和全局过滤器
1.定义一个全局过滤器
Vue.filter('msgFormat', function(msg) { // msg 为固定的参数 即是你需要过滤的数据
return msg.replace(/单纯/g, 'xxx')
})
完整示例:
<div id="app">
<p>{{ msg | msgFormat}}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器,名字叫做 msgFormat
Vue.filter('msgFormat', function(msg) {
// 字符串的 replace 方法,第一个参数,除了可写一个 字符串之外,还可以定义一个正则
return msg.replace(/单纯/g, 'xx')
})
</script>
2.定义一个局部过滤器
在组件或vue实例里面使用 filters:{
过滤器名(){}
}
定义的是局部过滤器,只能在自己的组件内部使用
3、使用:
只能使用在{{}}和:v-bind中,定义时第一个参数固定为预处理的数,后面的数为调用时传入的参数,调用时参数第一个对应定义时第二个参数,依次往后类推
<h3 :title="test|changemsg(1234)">{{test|changemsg(4567)}}</h3>
//多个过滤器也可以串行使用
<h2>{{name|filter1|filter2|filter3}}</h2>
4、案例
<div id="box">
{{name|abc}}
</div>
<script>
Vue.filter('re',function(a){
// console.log(a)
return a.split('').reverse().join('')
})
Vue.filter('xxoo',function(da){
// var a = da.replace('(w','(200')
return da.replace(/\(w/,'(200').replace(/h\)/,'300)')
})
var VM = new Vue({
el:"#box",
data:{
age:18,
name:'abc',
content:'我姓王,住隔壁',
url:'www.itlong.top?(w,h)&cb=xxoo'
},
filters:{
//局部过滤器,只能在当前组件中使用
abc(da){
return da+'xxoo'
},
dd:function(){
}
}
})
</script>