VUE中moment插件，格式小数点位数，时间样式等

最新推荐文章于 2024-07-16 11:23:44 发布

_WaCz?

最新推荐文章于 2024-07-16 11:23:44 发布

阅读量639

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/wangcz0630/article/details/106267983

版权

moment
格式化时间
在webstorm中右击项目，Open in Terminal

npm i moment --save
要记得在要使用的vue中导入
import moment from “moment”

mounted钩子，全部加载完毕后执行

设置定时器实施实时更新日期

<template>
    <div>
        <h3>格式化人民币</h3>
        <p>{{money | moneyFilter}}</p>
        <p>{{page | wholeMoneyFormat}}</p>
        <p></p>
        <h3>格式化日期</h3>
        <p>{{time}}</p>
        <p>{{time | timeFormat}}</p>
        <p>{{time | timeFormat('HH:mm:ss')}}</p>
    </div>
</template>0

<script>
    import moment from "moment"
    export default {
        name: "LkFilters",
        data() {
            return {
                money: 22334,
                page: 123.123,
                time:new Date()
            }
        },
        mounted() {
            setInterval(()=>{
                this.time = new Date()
            },1000)
        },
        filters: {
            //局部过滤器
            moneyFilter(value) {
                return '￥' + Number(value).toFixed(2);
            },
            timeFormat(value , format='YYYY-MM-DD HH:MM:SS'){
                return moment(value).format(format);
            }

        }
    }
</script>

<style scoped>

</style>