精华内容
下载资源
问答
  • Vue格式化时间

    2019-06-27 09:24:26
    Title 完整时间{{createTime | format()}} 年月日{{createTime | format("YYYY-MM-DD")}} 时分秒{{createTime | format("HH:mm:ss")}} 第一步:下载: npm install moment --save 第二步:然后再入口文件 main.js中...

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="demo">
        <p>完整时间{{createTime | format()}}</p>
        <p>年月日{{createTime | format("YYYY-MM-DD")}}</p>
        <p>时分秒{{createTime | format("HH:mm:ss")}}</p>
    </div>
    </body>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
    <script>
        Vue.filter("format",function(value,date='YYYY-MM-DD HH:mm:ss'){
            return moment().format(date);
        })
        var vm=new Vue({
            el:"#demo",
            data:{
                createTime:new Date()
            }
        })
    </script>
    </html>
    

    第一步:下载:
    npm install moment --save
    第二步:然后再入口文件 main.js中导入并使用
    import moment from ‘moment’//导入文件
    Vue.prototype.moment=moment;//使this.moment = moment;//赋值使用 第三步:这个时候,在项目就可以this.moment来使用moment的一系列方法了
    例:
    this.moment().format(yyyyMMdd);letdateValue=this.moment().format('yyyy-MM-dd'); let dateValue =this.moment(new Data()).format(“YYYY-MM-DD”);//2019-04-12
    复制代码

    展开全文
  • VUE格式化时间的方法

    千次阅读 2019-05-08 10:21:28
    这里提供一个关于时间格式化的方法,希望对阁下有用。 代码如下: dateFilter: function(input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() < 9 ? "0" + (d....

    很多时候我需要的时间格式是
    这样的
    在这里插入图片描述
    还有这样的
    在这里插入图片描述
    但原始的时间格式却是这样的
    在这里插入图片描述
    这里提供一个关于时间格式化的方法,希望对阁下有用。
    在这里插入图片描述
    代码如下:
    dateFilter: function(input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1); var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate(); var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours(); var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes(); var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds(); return ( year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds ); }

    展开全文
  • 1.后台格式化时间 SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String currentDate = df.format(entity.getEffectDate()); 2.vue前台 // 获取当前时间函数 nowTimes() { let year = ...

    1.后台格式化时间

    SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

    String currentDate = df.format(entity.getEffectDate());

    2.vue前台

    // 获取当前时间函数

    nowTimes() {

    let year = new Date().getFullYear();

    let month =new Date().getMonth() + 1 < 10? "0" + (new Date().getMonth() + 1): new Date().getMonth() + 1;

    let date =new Date().getDate() < 10? "0" + new Date().getDate(): new Date().getDate();

    let hh =new Date().getHours() < 10? "0" + new Date().getHours(): new Date().getHours();

    let mm =new Date().getMinutes() < 10? "0" + new Date().getMinutes(): new Date().getMinutes();

    let ss =new Date().getSeconds() < 10? "0" + new Date().getSeconds(): new Date().getSeconds();

    this.nowTime =year +"年" +month +"月" +date +"日" +" " +hh +":" +mm +":" +ss;

    let _this = this;

    setTimeout(() => {

    _this.nowTimes();

    }, 1000);

    },

    展开全文
  • 格式化时间: 后端传了一个 2020-11-27T12:01:50.942 00:000 这样的时间过来,结果我发现我之前用的时间过滤器竟然不能把这个时间转化成 yyyy-MM-dd hh:mm:ss,于是就发现moment.js这个插件啦~ 安装: npm install ...

    1、moment.js插件的使用

    后端传了一个 2020-11-27T12:01:50.942 00:000 这样的时间过来,结果我发现我之前用的时间过滤器竟然不能把这个时间转化成正确时间,于是就发现moment.js这个插件啦~
    同时,感谢一个up主的文章解惑。原来,前端从mysql取出timestamp类型的时间与实际时间差8小时。

    安装:

    npm install moment
    

    引入(局部):

    import moment from 'moment'
    

    把后台获取到的时间直接格式化,在丢到data中

    time: moment(elem.gmtCreate).format('YYYY-MM-DD hh:mm:ss'),
    

    2、定义一个时间过滤器

    在main.js文件中,定义一个时间过滤器

    // 定义一个过滤器 处理时间
    Vue.filter('dateFormat', function (originVal) {
      const dt = new Date(originVal)
      const y = dt.getFullYear()
      // 月份从0开始,使她变成字符串,不足两位时,前面补个0.
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })
    

    在需要转化时间的组件中直接使用:

     <template slot-scope="scope">
                {{scope.row.add_time | dateFormat}}
     </template>
    

    3、外部引入一个time.js文件

    创建一个time.js文件:

    /**
     * @param {Function} fn 防抖函数
     * @param {Number} delay 延迟时间
     */
    export function debounce (fn, delay) {
      var timer
      return function () {
        var context = this
        var args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          fn.apply(context, args)
        }, delay)
      }
    }
    
    /**
     * @param {date} time 需要转换的时间
     * @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
     */
    export function formatTime (time, fmt) {
      if (!time) return ''
      else {
        const date = new Date(time)
        const o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'H+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          S: date.getMilliseconds()
        }
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        }
        for (const k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
          }
        }
    
        return fmt
      }
    }
    
    

    在data中:

     dateDay: null,
     dateYear: null,
     dateWeek: null,
     weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    

    在script中引入time.js

    import { formatTime } from '../utils/time.js'
    

    在created(){}中:

    this.timeFn()
    

    在methods中:

    timeFn () {
          setInterval(() => {
            this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
            this.dateWeek = this.weekday[new Date().getDay()]
            this.dateDay = formatTime(new Date(), 'HH: mm: ss')
          }, 1000)
        },
    

    在template把时间渲染在页面上:

     <div>{{dateYear}}{{dateWeek}}{{dateDay}}</div>
    

    4、直接转换

    此转换出来的结构为,如: 2020/11/30 下午3:06:15

     const date = new Date().toLocaleString()
     this.dialogData = {}
     this.dialogData.now = date
    

    5、实时显示时间

    <template>
      <div>{{date}}</div> //放置时间
    </template>
    
    <script>
    export default {
      data () {
        return {
          date: new Date()
        }
      },
      mounted () {
        // 声明一个变量指向Vue实例this,保证作用域一致
        let _this = this
        this.timer = setInterval(() => {
          // 修改数据date
          _this.date = new Date().toLocaleString()
        }, 1000)
      },
      beforeDestroy () {
        if (this.timer) {
          // 在vue实例销毁前,清除我们的定时器
          clearInterval(this.timer)
        }
      }
    }
    </script>
    
    展开全文
  • 格式化时间的插件库 点击进入 moment.js网址,在这里可以找到需要引入的script标签 点击进入 moment.js的文档在文档中可以找到对应的格式和例子 此文来源于:...
  • vue 格式化时间字符串 formatTime

    万次阅读 2019-07-04 15:32:45
    filters: { formatTime: function (date, fmt) { var date = new Date(date); if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.get...
  • 插件 https://github.com/brockpetrie/vue-moment 安装 ...import Vue from 'vue' const moment = require('moment') // 中文 require('moment/locale/zh-cn') Vue.use(require('vue-moment'),{ ...
  • 一、在项目package-lock.json配置好moment-timezone { "name": "dashboard", "version": ... 五、想了解更多 Vue中使用 moment 格式化时间 请去这里看详细moment 来源:https://www.cnblogs.com/pzw23/p/12558992.html
  • methods: {//格式化时间戳formatDate: function (value) {var date = new Date(value);Y = date.getFullYear(),m = date.getMonth() + 1,d = date.getDate(),H = date.getHours(),i = date.getMinutes(),s = date....
  • vue时间格式化例子

    2021-01-07 09:01:04
    vue格式化时间 解决方法: 1.package.json文件添加依赖: "moment": "^2.14.1", 2.组件中引用 import moment from 'moment'; 3.设置过滤器 mounted:function(){ //过滤器 日期格式化,将 mongo 的 utc ...
  • 主要介绍了vue格式化时间过滤器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • methods: {//格式化时间戳formatdate: function (value) {var date = new date(value);y = date.getfullyear(),m = date.getmonth() + 1,d = date.getdate(),h = date.gethours(),i = date.getminutes(),s = date....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,029
精华内容 411
关键字:

vue格式化时间

vue 订阅