Vue过滤器-filter
程序员文章站
2024-02-09 17:53:22
...
Vue中的过滤器不能替代Vue中的methods、computed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。
过滤器作用:让要显示在页面上的内容进行重新筛选
Vue过滤器分全局过滤器和组件过滤器
全局过滤器
定义
// 第一个参数是需要过滤的数据.
// 第二个参数是给过滤器传递的值.
Vue.filter('global-filter',(val,...args)=>{
console.log(`需要过滤的数据是:${val}`)
return val + ' 过滤器追加的数据'
})
var app = new Vue({
el: '#app',
data: {
price:null,
oldValue: '原始数据'
})
<div id='app'>
<p>{{oldValue | global-filter}}</p>
</div>
注意,过滤器在插值表达式里使用 lunix 命令行的管道语法.
{{ oldValue | global-filter }}
把 oldValue 的值原封不动的传递给 global-filter.
在 global-filter 方法定义里,第一个参数 val 就是 oldValue。
当然,过滤器本来就是一个方法,方法肯定是可以传参数的.
Vue.filter('global-filter',(val,...args)=>{[图片上传中...(15445114994941.jpg-9fecae-1544511784154-0)]
args.forEach(item=>{
val += ` ${item} - `
})
return val + ' 过滤器追加的数据'
})
<div id='app'>
<p>{{oldValue | global-filter(1,2,3,4,5)}}</p>
</div>
组件过滤器
全局过滤器通过 Vue.filter(‘filtername’,fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用.
局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.
具体语法:
var app = new Vue({
el: '#app',
data: {
price:null,
oldValue: '原始数据'
},
methods: {},
// 定义组件过滤器
filters: {
priceFmt(val,location) {
switch(location) {
case 'usa':
return '$' + val
break
default:
return val
}
}
})
除了使用范围不同,全局过滤器和组件过滤器没有任何其他的区别.
上一篇: CorelDRAW(CDR)设计制作俱乐部宣传海报实例教程
下一篇: PHP的命令行命令使用指南