vue的过滤器

今天研究下 vue的过滤器

---

一、是什么？

🍕输送介质管道上不可缺少的一种装置。

通俗的话就是把一些不必要的东西过滤掉

需要注意的是，过滤器实质不改变原始数据，只是对数据进
行加工处理后返回过滤后的数据再进行调用处理，可理解为一个纯函数。

Vue 允许自定义过滤器，可被用于一些常见的文件格式化

Vue3中已废弃 filter

二、如何用

两个地方：插值和v-bind表达式，

{{name | Name}}
<div :id="nameL | nameS"></div>
1
2

定义filter
在组件的选项中定义本地的过滤器

filters:{
  Name:function(value){
	if(!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
	}
}
1
2
3
4
5
6
7

定义全局过滤器

Vue.filter("Name",function(value){
 if(!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase()+value.slice(1)
})
1
2
3
4
5

注意：全局和局部重名时，会采用局部的。
过滤器可以串联：

{{name | Name} | ss | mm}
1

过滤器是js函数，可以接收参数

{{ name | Name('arg',a)}}
1

例子：

<div id="app">
  <p>{{msg | msgFormat('data','--')}}</p>
</div>
<script>
 Vue.filter('msgFormat',function(msg,arg,a){
	return msg.replace(/name/g,a)
})
</script>
1
2
3
4
5
6
7
8

• 局部过滤器优先于全局过滤器
• 一个表达式可以使用多个过滤器。必不可少的 | 管道符隔开。其执行顺序从左往右。