vue过滤器

vue过滤器,第1张

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已经剔除了过滤器相关功能,

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1320873.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存