过滤器(Filters)是vue为开发者提供的功能，常用于文本的格式化
可以用在两个地方:插值表达式和v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部,由"管道符"进行调用
例:
<body>
<div id="app">
<!-- 此时message的值为调用cpass后返回的值 -->
<p>message的值是:{{ message | capss }}</p>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: 'hello vue.js'
},
methods: {},
//过滤器函数必须被定义到filters节点之下
//过滤器本质上是函数
filters: {
//注意:过滤器函数形参中的val,永远都是"管道符"前面的那个值
capss(val) {
//val.charAt(0)用charAt 方法将索引为0的h单独获取出来
//toUpperCase() 将小写字母转变为大写
const first = val.charAt(0).toUpperCase()
//用slice 方法从指定索引往后截取
const other = val.slice(1)
//强调:过滤器中,一定要有一个返回值
return first + other
}
},
})
</script>
</body>私有过滤器与全局过滤器
上文演示的定义在vm实例中的过滤器capss是私有的
在创建一个实例无法使用capss
全局过滤器 - 独立于每个vm实例之外
Vue.filter()方法接收两个参数
第一个参数是全局过滤器的"名字"
第二个参数是全局过滤器的"处理函数"
在全局和私有过滤器同名时,就近原则使用私有的过滤器
//将全局过滤器并列写在vm实例上方
Vue.filter('capss', (str) => {
return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
})过滤器连续调用
从左到右依次调用
<p>message的值是:{{ message | capss | 其他过滤器}}</p>过滤器本质是JavaScript函数因此可以接收参数
<!-- arg1 和 arg2 是传递给 filterA 的参数 -->
<p>{{ message | filterA(arg1,arg2)}}</p>
<!-- 第一个参数永远都是"管道符"前面待处理的值
从第二个开始是调用时传递而来的值 -->
Vue.filtter('filterA',(msg,arg1,arg2)=>{代码逻辑}！！！Vue3.x已剔除过滤器