语法
html...
<div> {{ data1 | filterFun1 }} </div>
vue...
data(){
return{
data1:'我是参数1'
}
}
filters:{
filterFun1(value){
console.log(value)
// 我是参数1
}
}
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
多个参数
html...
<div> {{ data1,data2 | filterFun1 }} </div>
vue...
data(){
return{
data1:'我是参数1',
data2:'我是参数2'
}
}
filters:{
filterFun1(value1,value2){
console.log(value1,value2)
// 我是参数1,我是参数2
}
}
html...
<div> {{ data1,data2 | filterFun1('aa','bb') }} </div>
vue...
data(){
return{
data1:'我是参数1',
data2:'我是参数2'
}
}
filters:{
filterFun1(value1,value2,a,b){
console.log(value1,value2)
// 我是参数1,我是参数2
console.log(a,b)
// aa bb
}
}
多层过滤器
html...
<div> {{ data1 | filterFun1 | filterFun2 | filterFun3 }} </div>
vue...
data(){
return{
data1:6,
}
}
filters:{
filterFun1(value){
console.log(value)
// 6
return value * 2
},
filterFun2(value){
console.log(value)
// 12
return value + 8
},
filterFun3(value){
console.log(value)
// 20
}
}
左边一个一直是右边的参数