过滤器介绍

最新推荐文章于 2025-12-20 10:06:21 发布

原创最新推荐文章于 2025-12-20 10:06:21 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端同时被 2 个专栏收录

19 篇文章

订阅专栏

VUE

14 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用filter功能，展示了如何定义和使用时间格式化过滤器（如fmttime和timeFormater），以及如何传递参数并串联多个过滤器。通过实例演示了如何将时间戳转化为易读格式，并演示了字符串切片操作（如mySlice）。

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

语法：

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

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

备注：

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

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

<!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>
			<!-- methods -->
			<h3>现在是{{getfmttime()}}</h3>
			<!-- 过滤器实现-->
			<h3>现在是{{time | timeFormater}}</h3>
			<!-- 过滤器实现 传参-->
			<h3>现在是{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
        </div>
        
		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
		<script type="text/javascript" >
        Vue.config.productionTip = false
		Vue.filter('mySlice',function(value){
				return value.slice(0,4)
			
		})
        new Vue({
			el:'#root',
			data:{
				time:1647768796,
				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'){
					return dayjs(value).format(str)
				},
				//mySlice(value){
					//return value.slice(0,4)
				//}
			}
		})

		new Vue({
			el:"#root2",
			data:{
				msg:'hellohhhhh'
			}
		})

        </script>
	</body>
</html>