zoukankan      html  css  js  c++  java
  • vue实例获取当前系统时间

    vue实例获取当前系统时间

    效果图:

     代码:

    <template>
        <div class="home1-3-1 clearfix">
            <span>{{ nowDate }}</span>
            <p> <em>{{ nowYear }}.{{ nowMouth }}</em> <i>{{ nowWeek }}</i> </p>
        </div>
    </template>  
    <script>
    export default {
        data () {
            return {
                nowYear: '',
                nowMouth: '',
                nowDate: '',
                nowWeek: ''
            }
        },
        mouted(){
            this.getdate()
       },
        methods:{
            getdate() {
            const year = new Date().getFullYear()
            const mounth = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
            const date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
            const week = new Date().getDay()
            if (week === 1) {
              this.nowWeek = '星期一'
            } else if (week === 2) {
              this.nowWeek = '星期二'
            } else if (week === 3) {
              this.nowWeek = '星期三'
            } else if (week === 4) {
              this.nowWeek = '星期四'
            } else if (week === 5) {
              this.nowWeek = '星期五'
            } else if (week === 6) {
              this.nowWeek = '星期六'
            } else if (week === 27) {
              this.nowWeek = '星期日'
            }
            this.nowYear = year
            this.nowMouth = mounth
            this.nowDate = date
          }
        }
    }
    </script>   

    css样式我没有写,需要时分秒再通过其对应方法获取即可,年月日也可以进行拼接

  • 相关阅读:
    浏览网页的过程
    端口转发和端口映射
    代码审计入门之BlueCMS v1.6 sp1
    php伪协议总结
    phar反序列化
    iOS开发之GCD使用总结
    深入理解Android NDK日志符号化
    Android 开源项目源码解析之DynamicLoadApk 源码解析
    Gilt如何将微服务部署到AWS环境,介绍ION-Roller
    100分程序员的8个习惯
  • 原文地址:https://www.cnblogs.com/Maipocket-y/p/13355721.html
Copyright © 2011-2022 走看看