1.filters私有过滤器
<template>
<view>
{{test|testp}}
</view>
</template>
<script>
export default {
data() {
return {
test:'锅炉器'
}
},
filters:{
// 注:过滤器函数形参中的val,永远都是管道符前面的那个值
testp(val) {
// 强调:过滤器中一定要有一个返回值
console.log(val)
return '13'
}
}
}
</script>
<style lang="scss" scoped></style>
2.全局过滤器
在main.js中写的
// Vue.filter(参数1,参数2)接收两个参数
// 参数1:全局过滤器的名字
// 参数2:全局过滤器的处理函数
Vue.filter('test',(str,arg1,arg2)=>{
console.log(str)
return str.split('')
})
//注str,arg1,arg2
// str永远是管道符前面的那个值
// 从第二个参数(arg1)开始,才是调用过滤器时传递过来arg1和arg2参数
3.过滤器还可以串联进行调用
{{test | filterA | filterB}}
(1)把test的值交给filterA处理
(2)把filterA处理的结果再交给filterB处理
(3)把filterB处理的结果再渲染到页面上
注:vue3.0已经剔除了过滤器相关功能,
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)