Vue过滤器

小白_ysf

已于 2023-07-04 16:08:41 修改

阅读量1k

点赞数 1

分类专栏： Vue2+Vue3 文章标签： vue.js 前端 javascript

于 2023-06-27 10:22:05 首次发布

本文链接：https://blog.csdn.net/weixin_41549971/article/details/131411200

版权

Vue2+Vue3 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Vue过滤器用于数据格式化，如日期、货币转换。它们可以全局或局部注册，用在双花括号插值和v-bind表达式中。过滤器支持链式调用和接收参数，不会改变原始数据。全局和局部过滤器有优先级，同名时局部优先。文章提供了全局与局部过滤器的示例代码。

摘要由CSDN通过智能技术生成

一、介绍

Vue 过滤器是一种全局可用的函数，它可以用于将模板中的数据进行格式化或转换。过滤器可以用于在显示数据之前对数据进行操作。它可以用于格式化日期、货币、大小写转换等。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器可以在模板中通过管道符号 | 调用，例如：

<p>{{ message | capitalize }}</p>

二、语法

1.注册过滤器

Vue.filter(name,callback) 或 new Vue{filters:{}}

2.使用过滤器

{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

三、备注

1.过滤器也可以接收额外参数、多个过滤器也可以串联

{{ message | filterA | filterB }}
在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

{{ message | filterA('arg1', arg2) }}
这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

2.并没有改变原本的数据, 是产生新的对应的数据
3.当全局过滤器和局部过滤器重名时，会采用局部过滤器。

四、分类

1. 全局过滤器

在这个例子中，message 是一个数据变量，capitalize 是一个过滤器。过滤器函数将会接收 message 变量的值作为输入，并返回经过处理后的结果。例如，如果 message 的值为 "hello world"，那么 capitalize 过滤器可以将其转换为 "Hello World"。

在 Vue 中定义过滤器非常容易。你可以通过下面的代码片段来定义一个名为 capitalize 的过滤器：

//全局过滤器
Vue.filter('capitalize', function(value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

在这个例子中，我们使用 Vue 提供的 filter 方法注册了一个名为 capitalize 的过滤器。该过滤器接收一个值作为参数，并将其转换为首字母大写的格式。

2.局部过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<!-- 对应去下载相关js文件 -->
		<!-- https://v2.cn.vuejs.org/v2/guide/installation.html -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 对应去下载相关js文件 -->
		<!-- https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js -->
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice"></h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好'
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})
	</script>
</html>