Vue2.0-指令与过滤器(下)
1.过滤器
过滤器是Vue为开发者提供的功能,常用于文本的格式化,同样他也是一个函数。过滤器可以用在两个地方:插值表达式和v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部,由 "管道符 | " 进行调用
<body>
<div id="app">
<p>message:{{message | capi}}</p>
</div>
<script src="../Vue/vue.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
message:'zh'
},
//过滤器函数,必须被定义到filters节点之下
//过滤器本质上是函数
filters:{
//形参里面的 val 永远都是 管道符 前面的值
capi(val){
//字符串有一个 charAt方法 这个方法接收索引值 表示从字符串中 把索引对应的字符获取出来
const frist=val.charAt(0).toUpperCase()
//字符串的slice 方法 可以截取字符串,从指定索引往后截取
const other=val.slice(1)
//强调:过滤器中,一定要有一个返回值
return frist+other
}
}
})
</script>
</body>
过滤器的注意点
1.要定义到filters节点下,本质上是一个函数
2.在过滤器函数中,一定要有return值
3.在过滤器的形参中,就可以获取到"管道符"前面待处理的哪个值
4.如果全局过滤器和私有过滤器名字一致,,此时按照"就近原则",调用的是"私有过滤器"
1.1私有过滤器和全局过滤器
在filters节点下定义的过滤器,称为"私有过滤器",因为他只能在当前vm实例所控制的el区域内使用。如果希望在多个vue实例之间共享过滤器,则可以按照下面的格式来定义全局过滤器
全局过滤器:独立于每个 vm 实例之外
**Vue.filter()**方法接收两个参数:
第一个参数:是全局过滤器的"名字"
第二个参数:是全局过滤器的"处理函数"
<body>
<div id="app">
<p>message:{{message | capi}}</p>
</div>
<div id="app1">
<p>message:{{message | capi}}</p>
</div>
<script src="../Vue/vue.js"></script>
<script>
//使用Vue.filter()定义全局过滤器
Vue.filter('capi',(str)=>{
const frist=str.charAt(0).toUpperCase()
const other=str.slice(1)
return frist+other
})
const vm=new Vue({
el:'#app',
data:{
message:'zh'
},
//过滤器函数,必须被定义到filters节点之下
//过滤器本质上是函数
filters:{
//形参里面的 val 永远都是 管道符 前面的值
capi(val){
//字符串有一个 charAt方法 这个方法接收索引值 表示从字符串中 把索引对应的字符获取出来
const frist=val.charAt(0).toUpperCase()
//字符串的slice 方法 可以截取字符串,从指定索引往后截取
const other=val.slice(1)
//强调:过滤器中,一定要有一个返回值
return frist+other
}
}
})
const vm1=new Vue({
el:'#app1',
data:{
message:'han'
},
//过滤器函数,必须被定义到filters节点之下
//过滤器本质上是函数
filters:{
//形参里面的 val 永远都是 管道符 前面的值
capi(val){
//字符串有一个 charAt方法 这个方法接收索引值 表示从字符串中 把索引对应的字符获取出来
const frist=val.charAt(0).toUpperCase()
//字符串的slice 方法 可以截取字符串,从指定索引往后截取
const other=val.slice(1)
//强调:过滤器中,一定要有一个返回值
return frist+other
}
}
})
</script>
</body>
1.3过滤器传参
过滤器的本质就是JavaScript函数,因此可以接收参数
过滤器处理函数的形参列表中:
第一个参数:永远都是"管道符"前面待处理的值
从第二个参数开始,才是调用过滤器时传递过来的arg1 和 arg2 参数
<p>{{massage | filterA(arg1,arg2)}}</p>
<script>
Vue.filter('filterA',(msg,arg1,arg2)=>{
//过滤器的逻辑代码
})
</script>