Vue 过滤器
过滤器的基本使用
<div id="root">
<!-- 1、过滤器要定在filters下,本质是一个函数
2、在过滤器函数中一定要有返回值
3、在过滤器形参中 ,可以获取到管道符前未处理的值
-->
<!-- 过滤器常用于文本格式化,1、插值表达式 -->
<!-- 把message的值当作参数传递给 |(管道符) 号后面的 capitalize 渲染出来的结果是 capitalize 处理后的结果-->
<p>{{message | capi}}</p>
<!-- 2、v-bind属性绑定 -->
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
message:'hello vue.js'
},
//过滤器函数必须定义在filters,过滤器中一定要有返回值
filters:{
capi:function(val){
return val.substring(0,1).toUpperCase()+val.substring(1)
// return this.message.substring(0,1).toUpperCase() + this.message.substring(1)
}
}
})
</script>
私有过滤器与全局过滤器
<div id="root">
<p>{{message | capi}}</p>
<!-- 定在Vue对象里面的均为私有过滤器 -->
</div>
<script type="text/javascript">
//si
//第一个参数是过滤的名字,第二个参数是过滤器的处理函数 (val是管道符未处理的数据值)
//如果全局过滤器与私有过滤器名字一致。采用就近原则
Vue.filter("capi",function(val){
return val.substring(0,1).toUpperCase()+val.substring(1)
})
new Vue({
el:"#root",
data:{
message:'hello vue.js'
}
})
</script>
过滤器的其他用途
<div id="root">
<!-- 可以添加多个过滤器。 -->
<p>{{message | capi | fz }}</p>
<!-- 过滤器传递参数 ,参数带‘’号-->
<p>{{message|filterA('a1','a2')}}</p>
</div>
<script type="text/javascript">
//首字母大写过滤器
Vue.filter("capi",function(val){
return val.substring(0,1).toUpperCase()+val.substring(1)
}),
//反正内容过滤器
Vue.filter("fz",function(val){
return val.split('').reverse().join('')
})
//传递参数过滤器
// (第一个值为管道前的值,第二个值是传入的a1,第三个值是传入的a2)
Vue.filter("filterA",function(msg,val1,val2){
console.log(msg,val1,val2)
return msg+val1+val2
})
new Vue({
el:"#root",
data:{
message:'hello vue.js'
}
})
</script>