Vue使用过滤器Vue.filter，使用dayjs

仰望天空的小小蜗牛

已于 2022-01-25 09:47:06 修改

阅读量619

点赞数

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

于 2021-12-19 17:33:03 首次发布

本文链接：https://blog.csdn.net/weixin_46724415/article/details/122025847

版权

Vue.js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

本文主要介绍怎么使用Vue过滤器Vue.filter和使用dayjs时间插件

认识过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据

如何引入dayjs

dayjs官网
在这里插入图片描述

在这里插入图片描述

准备工作：

1.保存dayjs工具到本地

在这里插入图片描述

2.引入vue和dayjs

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/dayjs.min.js"></script>

3.准备好一个容器

<div id="root"></div>

4.new 一个Vue实例

new Vue({
	el:'#root',
	data:{
		time:1621561377603, //时间戳
		msg:'你好，张三'
	}
})

vue过滤器

包括局部过滤器实现和全局过滤器实现

1.局部过滤器：

<h3>过滤器实现：{{time | timeFormater}}</h3>
<h3>过滤器实现传参：{{time | timeFormater('YYYY_MM')}}</h3>

filters: {
	timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss') {
		console.log('@',value)
		console.log('str',str)
		return dayjs(value).format(str)
	}
}

页面展示
从控制台输出可以看出，过滤器第一个参数默认是time，第二个参数直接传

2.全局过滤器

页面展示

<!-- vue实例1 -->
<div id="root">
	<h3 :x="msg | mySlice">张三</h3>
</div>

<!-- vue实例2 -->
<div id="root2">
	<h2>{{msg | mySlice}}</h2>
</div>

全局过滤器：注册和返回处理后的值

Vue.filter('mySlice',function(value){
	return value.slice(0,4)
})

new Vue({
	el:'#root',
	data:{
		msg:'你好，张三'
	}
})
new Vue({
	el:'#root2',
	data:{
		msg:'hello,zhangsan!'
	}
})

3.过滤器可以串联

<h3>过滤器可以串联：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>

如下页面展示可以看出：第一个过滤器得出的2021_5_21的值传给第二个过滤器作为默认参数，最后页面展示第二个过滤器的出的值

使用dayjs过滤数据的几种方法

页面展示

在这里插入图片描述

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<h3>计算属性实现：{{fmtTime}}</h3>
			<h3>methods实现：{{getFmtTime()}}</h3>
			<h3>过滤器实现：{{time | timeFormater}}</h3>
			<h3>过滤器实现传参：{{time | timeFormater('YYYY_MM')}}</h3>
			<h3>过滤器可以串联：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">张三</h3>
		</div>
		
		<!-- 全局过滤器实现 -->
		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</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:'你好，张三'
			},
			computed: {
				fmtTime(){
					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: {
				timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss') {
					console.log('@',value)
					console.log('str',str)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,zhangsan!'
			}
		})
	</script>
</html>