今天研究下 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>
- 局部过滤器优先于全局过滤器
- 一个表达式可以使用多个过滤器。必不可少的 | 管道符隔开。其执行顺序从左往右。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163278.html
