vue自定义过滤器

最新推荐文章于 2025-04-03 22:04:15 发布

胡崽崽!

最新推荐文章于 2025-04-03 22:04:15 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_62198921/article/details/122930199

版权

本文介绍了Vue.js中的过滤器功能，包括全局过滤器和局部过滤器的使用。全局过滤器可在应用的所有组件中使用，而在main.js中定义；局部过滤器仅限于组件内部，通过filters属性设置。过滤器主要用于数据展示前的处理，不影响原始数据，常见应用如时间格式化和价格显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
vue中的过滤器分为两种：全局过滤器和局部过滤器

全局过滤器

全局过滤器就是在main.js中通过Vue.filter()中定义，定义好后，它在所有组件中都可以使用

Vue.filter('formatePrice', (val) => {
    return val.toFixed(2)
})
// 使用
{{13.44 | formatePrice}}

局部过滤器

局部过滤器，定义在组件内部filters属性上，它只能在此组件内部使用。过滤器的使用方式是，在双花括号或v-bind中通过一个管道符来拼接，项目中使用过滤器：时间，价钱


<script>
	export default {
		data() {
			return {}
		},
		filters: { 
	    formateTime(val) {
	      let date = new Date(val)
	      let year = date.getFullYear()
	      let month = date.getMonth() + 1
	      let day = date.getDate()
	      return `${year}/${month}/${day}`
	    }
	  }
	}
</script>