今天研究下 vue的过滤器
输送介质管道上不可缺少的一种装置。
通俗的话就是把一些不必要的东西过滤掉
需要注意的是,过滤器实质不改变原始数据,只是对数据进
行加工处理后返回过滤后的数据再进行调用处理,可理解为一个纯函数。
Vue 允许自定义过滤器,可被用于一些常见的文件格式化
Vue3中已废弃 filter
两个地方:插值和v-bind表达式,
{{name | Name}}
<div :id="nameL | nameS"></div>
定义filter
在组件的选项中定义本地的过滤器
filters:{
Name:function(value){
if(!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
定义全局过滤器
Vue.filter("Name",function(value){
if(!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase()+value.slice(1)
})
注意:全局和局部重名时,会采用局部的。
过滤器可以串联:
{{name | Name} | ss | mm}
过滤器是js函数,可以接收参数
{{ name | Name('arg',a)}}
例子:
<div id="app">
<p>{{msg | msgFormat('data','--')}}</p>
</div>
<script>
Vue.filter('msgFormat',function(msg,arg,a){
return msg.replace(/name/g,a)
})
</script>