Vue 过滤器filters

最新推荐文章于 2024-04-10 08:50:33 发布

转载最新推荐文章于 2024-04-10 08:50:33 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mengfangui/p/8118548.html

文章标签：

#javascript #ViewUI

本文介绍如何在Vue项目中使用Moment.js插件进行日期格式化，并提供了一个简单的示例代码。需要注意的是，在Vue的过滤器中无法直接访问到组件实例的this上下文。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、示例代码

采用vue单文件组件，使用moment插件格式化日期

<template>
    <div>
        <h1>{{date | dateFormat}}</h1> 
    </div>
</template>
<script>
    import moment from 'moment';
    import 'moment/locale/zh-cn';
    moment.locale('zh-cn');
    export default {
        data() {
            return {
                date: new Date()
            }
        },
        filters: {
            dateFormat(val) {
                return moment(val).calendar();
            }
        }
    }
</script>