Vue过滤器

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

 //需要导入的依赖
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.3/dayjs.min.js"></script>
	
	
	<body>
    <div id="root">
        <h1>现在的时间是：{{data | timeFormat}}</h1>
        <h1>现在是{{data | timeFormat | splic}} 年</h1>
    </div>
    <script>
        Vue.config.productionTip = false;
        //这是全局配置过滤器
        Vue.filter("splic", function (value) {
            return value.slice(0, 4);
        })
        new Vue({
            el: "#root",
            data: {
                time: 1658060536201
            },
            //这是局部配置
            filters: {
                timeFormat(value) {
                    //引入时间格式化器（dayjs）来格式化时间
                    return dayjs(value).format("YYYY-MM-DD HH:mm:ss")
                },
                // splic(value) {
                //     return value.slice(0, 4);
                // }
            }
        })
    </script>
</body>

posted @ 2022-07-17 20:34 小罗要有出息阅读(15) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· VUE简介

· Vue条件渲染

· Vue过滤器

· Vue 过滤器

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

Vue过滤器

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

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

	//需要导入的依赖
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.3/dayjs.min.js"></script>


	<body>
	<div id="root">
	<h1>现在的时间是：{{data \| timeFormat}}</h1>
	<h1>现在是{{data \| timeFormat \| splic}} 年</h1>
	</div>
	<script>
	Vue.config.productionTip = false;
	//这是全局配置过滤器
	Vue.filter("splic", function (value) {
	return value.slice(0, 4);
	})
	new Vue({
	el: "#root",
	data: {
	time: 1658060536201
	},
	//这是局部配置
	filters: {
	timeFormat(value) {
	//引入时间格式化器（dayjs）来格式化时间
	return dayjs(value).format("YYYY-MM-DD HH:mm:ss")
	},
	// splic(value) {
	// return value.slice(0, 4);
	// }
	}
	})
	</script>
	</body>