VUE封装时间组件 在每个组件里面调用就可以调整时间格式了

时间格式化的封装

<template>

<span>

  <span v-if="(dateValue)?true:false">

    <span v-show="dateShow">

    {{new Date(dateValue).getFullYear()}}{{(timeTypeChina===true)?"年":'-'}}{{(new Date(dateValue).getMonth()+1 < 10 ? '0'+(new Date(dateValue).getMonth()+1) : new Date(dateValue).getMonth()+1)}}{{(timeTypeChina===true)?"月":'-'}}{{(new Date(dateValue).getDate()+1 < 10 ? '0'+(new Date(dateValue).getDate()) : new Date(dateValue).getDate())}}{{(timeTypeChina===true)?"日":''}}

  </span>

  <span v-show="timeShow">

    {{

    (new Date(dateValue).getHours()< 10 ? '0'+(new Date(dateValue).getHours()) : new Date(dateValue).getHours())+':'+

    (new Date(dateValue).getMinutes() < 10 ? '0'+(new Date(dateValue).getMinutes()) : new Date(dateValue).getMinutes())+':'+

    (new Date(dateValue).getSeconds() < 10 ? '0'+(new Date(dateValue).getSeconds()) : new Date(dateValue).getSeconds())

    }}</span>

  </span>

</span>

</template>

<script>

    export default {

        data() {

            return {

                dateValue:null,

            }

        },

        props:{

      date:{

        default:0,

      },

      timeShow:{

        default:false,

      },

      dateShow:{

        default:true,

      },

      timeTypeChina:{

        default:false,

      },

    },

        created(){

            this.dateValue=Number(this.date)

        },

        watch: {

            date() {

                this.dateValue = Number(this.date)

            },

        },

        methods:{

        },

    }

</script>

<style>

</style>

调用。。。。。

1、页面引入组件

import dateView from "./../views/date-view.vue";

 components: {"date-view": dateView},

直接引用就行了      :data是yyyy-mm-dd       :timeShow 是yyyy-mm-dd  +时分秒

<date-view :date="item.createdTime"></date-view>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容