VUE学习(八)、过滤器

最新推荐文章于 2024-04-24 17:07:19 发布

夏至xz

最新推荐文章于 2024-04-24 17:07:19 发布

阅读量899

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46452300/article/details/122712954

版权

VUE 专栏收录该内容

26 篇文章 10 订阅

订阅专栏

VUE学习(八)、过滤器

过滤器：

vue3已经不推荐使用过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”

备注：

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

2.并没有改变原本的数据, 是产生新的对应的数据

3.vue中全局和局部过滤器里面的this都是window对象，而不是vm对象

<head>
	<meta charset="UTF-8" />
	<title>过滤器</title>
	<script type="text/javascript" src="../js/vue.js"></script>
	<!-- 
		Day.js 是一个轻量的处理时间和日期的 JavaScript 库，
		和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 
		那么您已经知道如何使用 Day.js 
	-->
	<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>
<body>
	<!-- 
		过滤器：
			vue3已经不推荐使用过滤器
			定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
			语法：
				1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
				2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
			备注：
				1.过滤器也可以接收额外参数、多个过滤器也可以串联
				2.并没有改变原本的数据, 是产生新的对应的数据
				3.vue中全局和局部过滤器里面的this都是window对象，而不是vm对象
	-->
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- 计算属性实现 -->
		<h3>现在是：{{fmtTime}}</h3>
		<!-- methods实现 -->
		<h3>现在是：{{getFmtTime()}}</h3>
		<!-- 过滤器实现 (此处time是作为一个参数传递给timeFormater)-->
		<h3>现在是：{{time | timeFormater}}</h3>
		<!-- 过滤器实现（传参）收到的第一个参数一定是过滤器管道符前边的参数 -->
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD')}}</h3>
		<!-- 
			多个过滤器互联
			每一个管道符前的表达式的值将会作为下一个过滤器的值
		-->
		<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

		<!-- 
			过滤器不一定只能用在插值语法中，例如v-bind中使用（很罕见）
			v-model中不能使用这个过滤器
			-->
		<h3 v-bind:x="msg | mySlice">学习vue</h3>
	</div>
	<!-- 测试全局过滤器 -->
	<div id="root2">
		<h2>{{msg | mySlice}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false;
	//全局过滤器
	Vue.filter("mySlice", function (value) {
		//console.log(this)
		// 截取字符串
		return value.slice(0, 4);
	});

	new Vue({
		el: "#root",
		data: {
			//time:1621561377603, //时间戳
			time: new Date().getTime(),
			msg: "我在学习vue"
		},
		// 计算属性
		computed: {
			fmtTime() {
				// dayjs()是引入dayjs文件后具有的一个全局函数
				// 如果不传参则格式化当前时间，传参为时间戳
				return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
			}
		},
		// 方法
		methods: {
			getFmtTime() {
				return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss");
			}
		},
		//局部过滤器
		filters: {
			// str为模板字符（默认YYYY年MM月DD日 HH:mm:ss）
			timeFormater(value, str = "YYYY年MM月DD日 HH:mm:ss") {
				// console.log('@',value)
				return dayjs(value).format(str);
			}
		}
	});

	new Vue({
		el: "#root2",
		data: {
			msg: "vue-yyds-good"
		}
	});
</script>

在这里插入图片描述

夏至xz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE学习(八)、过滤器

VUE学习(八)、过滤器过滤器： vue3已经不推荐使用过滤器定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法： 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名” 备注：
复制链接

扫一扫