精华内容
下载资源
问答
  • vue中显示实时时间

    2021-04-20 14:22:36
    vue项目显示实时时间vue项目显示实时时间vue中销毁定时器的两种写法 vue项目显示实时时间 <template> <div> {{nowTime}} </div> </template> <script> export default { ...

    vue项目中显示实时时间

    <template>
      <div>
        {{nowTime}}
      </div>
    </template>
    
    <script>
    export default {
      name: 'ShowTime',
      components: {},
      props: {},
      data () {
        return {
          nowTime:''
        };
      },
      methods: {
        //显示当前时间(年月日时分秒)
        timeFormate(timeStamp) {
          let year = new Date(timeStamp).getFullYear();
          let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
          let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
          let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
          let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
          let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
          this.nowTime = year + "年" + month + "月" + date + "日" + " " + hh + ":" + mm + ':' + ss ;
        },
        nowTimes(){
          this.timeFormate(new Date());
          setInterval(this.nowTimes,1000);
          this.clear()
        },
        clear(){
          clearInterval(this.nowTimes)
          this.nowTimes = null;
        }
      },
    }
    </script>
    
    <style  lang="scss" scoped>
    
    </style>
    

    引用在vue项目中显示实时时间(年月日时分秒)

    vue中销毁定时器的两种写法

    推荐第一种写法:
    在这里插入图片描述

    第二种在销毁钩子函数中:
    在这里插入图片描述

      countDown(time){
                // 将传递过来的时间戳差值转化为时分形式
                let ts = time
                let days = parseInt(ts / (1000 * 60 * 60 * 24));
                let hours = parseInt((ts % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                let minutes = parseInt((ts % (1000 * 60 * 60)) / (1000 * 60));
                let seconds = (ts % (1000 * 60)) / 1000;
                let str = `${seconds}秒`;
                if(seconds < 10){
                    seconds = '0' + str
                }
                if(minutes > 0){
                    str = `${minutes}分钟${seconds}秒`
                }else{
                    str = `00分钟${seconds}秒`
                }
                if(hours > 0){
                    str = `${hours}${minutes}分钟${seconds}秒`
                }
                if(days > 0){
                    str = `${days}${hours}${minutes}分钟${seconds}秒`
                }
                this.timeStr = str
                console.log(this.timeStr)
                return this.timeStr
            },
            // 倒计时
            timer() {
                // createTime
                // orderLatePayTime
                // let times = Date.parse(new Date()) //当前时间,本来应该由后台传回服务器时间,但是后台没有传,暂时已浏览器本机时间来计算
                // console.log(times)
                // let orderTimes = 1606617582000
                // let expires = 10*60*1000 //有效时长,默认是10分钟,本来应该由后台给出,但是后台没给,暂时写死
                // let endTime = orderTimes + expires
                
                let orderLatePayTime = new Date(this.orderDetailData.orderLatePayTime) //date日期类型 后端给的数据格式:"2020-12-12 11:23:32" 
                let orderLatePayTime_ms = orderLatePayTime.getTime();   //毫秒时间戳
                let currentTimes = Date.parse(new Date())  //获取当前时间
                let timediff = orderLatePayTime_ms - currentTimes
                if(orderLatePayTime_ms == currentTimes || timediff < 0){
                    clearInterval(this.orderTimer)
                    console.log(1)
                    // 修改页面状态
                    this.waitPay = false
                    // 取消订单
                    this.changeStatue('5')
                    // 倒计时之后发送请求 修改页面数据
                    this.getOrderDetailData(this.orderDetailData.orderId)
                    return 
                } else {
                    this.orderTimer = setTimeout(this.timer, 1000);
                    this.countDown(orderLatePayTime_ms - currentTimes)
                    // 第一种写法:
                    this.$once('hook:beforeDestroy',()=>{
                        clearInterval(this.orderTimer);
                        this.orderTimer = null;
                    })
                }
            },
            
      // 销毁定时器 第二种写法:
        beforeDestroy() {
            clearInterval(this.orderTimer)  //关闭定时器
            this.orderTimer = null
            // 调整手机上的状态栏颜色  
            // this.getBarColor('#FFFFFF')
        },
    
    展开全文
  • Js + Vue 实现时间计算

    万次阅读 2019-02-01 15:14:59
    之前一直用PHP后台计算时间差,提交后还要刷新页面,体验很不好,所以抽时间就利用Js和Vue Element 写了一个时间计算。不再调用后台,很舒服。 功能页面展示: 话不多说,直接上代码: &lt;script src=&...

    之前一直用PHP后台计算时间差,提交后还要刷新页面,体验很不好,所以抽时间就利用Js和Vue Element 写了一个时间差计算。不再调用后台,很舒服。

    功能页面展示:

    话不多说,直接上代码:

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <div class="site-index">
        <div class="body-content">
            <div class="row">
                <div class="col-md-9">
                    <div class="panel">
                        <div class="panel-body"
                             style="background-color: #f8f9fa;border: 1px solid #222222;border-radius:5px">
                            时间计算
                            <div class="block">
                                <el-date-picker
                                        v-model="value"
                                        type="datetimerange"
                                        :picker-options="pickerOptions"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        align="right">
                                </el-date-picker>
                            </div>
                            <el-button type="primary" :plain="true" @click="getTime">获取时间差</el-button>
                            <div id="show"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var siteIndexVue = new Vue({
            el: '.site-index',
            data: {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value: ''
            },
            methods: {
                getTime: function () {
                    if (this.value === '') {
                        this.open();
                        return;
                    }
                    Date.prototype.Format = function (fmt) {
                        var o = {
                            "M+": this.getMonth() + 1,                 //月份
                            "d+": this.getDate(),                    //日
                            "h+": this.getHours(),                   //小时
                            "m+": this.getMinutes(),                 //分
                            "s+": this.getSeconds(),                 //秒
                            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                            "S": this.getMilliseconds()             //毫秒
                        };
                        if (/(y+)/.test(fmt))
                            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                        for (var 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;
                    };
                    var beginTime = this.value[0].Format("yyyy/MM/dd hh:mm:ss");
                    var endTime = this.value[1].Format("yyyy/MM/dd hh:mm:ss");
                    this.$options.methods.difference(beginTime, endTime);
                },
                difference: function (beginTime, endTime) {
                    var dateBegin = new Date(beginTime);
                    var dateEnd = new Date(endTime);
                    var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
                    var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
                    var leave1 = dateDiff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数
                    var hours = Math.floor(leave1 / (3600 * 1000));//计算出小时数
                    //计算相差分钟数
                    var leave2 = leave1 % (3600 * 1000);   //计算小时数后剩余的毫秒数
                    var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
                    //计算相差秒数
                    var leave3 = leave2 % (60 * 1000);     //计算分钟数后剩余的毫秒数
                    var seconds = Math.round(leave3 / 1000);
                    document.getElementById("show").innerHTML = "<h1>" + "相差" + dayDiff + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒" + "</h1>";
                },
                open: function () {
                    this.$message({
                        message: '请选择时间!',
                        type: 'warning'
                    });
                },
    
            },
        })
    </script>

    欢迎指导!

    千而の大狮子~

    展开全文
  • 1. 安装moment.js ...Vue.prototype.$moment = moment 3. 在页面上使用 this.$moment().format('YYYY-MM-DD HH:mm:ss') //当前时间 this.$moment().subtract(90, 'days').format('YYYY-MM-DD HH:mm:ss')

    1. 安装moment.js

     npm install moment --save
    

    2. 在main.js文件中注册为全局的方法

     import moment from 'moment'
    Vue.prototype.$moment = moment
    

    3. 在页面上使用

    this.$moment().format('YYYY-MM-DD HH:mm:ss')  //当前时间
    this.$moment().subtract(90, 'days').format('YYYY-MM-DD HH:mm:ss')  //当前时间往前90天
    this.$moment().add(7, 'days').format('YYYY-MM-DD HH:mm:ss')   //当前时间往后推7天
    this.$moment().subtract(1, "years").format("YYYY-MM-DD")  //当前时间的前1年时间
    this.$moment().subtract(3, "months").format("YYYY-MM-DD") //当前时间的前3个月时间
    this.$moment().subtract(1, "weeks").format("YYYY-MM-DD")  //当前时间的前一个星期时间
    
    //计算两个时间之间的间隔
    const [start_time, end_time] = ['2021-04-02 15:59:06', '2021-07-01 15:59:06']
    //计算相差多少天,参数可传:day 、second、minute
    let dateRange = this.$moment(end_time).diff(this.$moment(start_time), 'day')
    

    4. moment.js官方文档

    moment.js中文网

    展开全文
  • vue 计算时间 差值

    千次阅读 2019-07-12 10:47:55
    // 计算差值 const getDifference = (myDate.getFullYear() - beforeYear)*365*24*60*60 +(myDate.getMonth() - beforeMonth +1)*30*24*60*60 +(myDate.getDate() - beforeDate )*24*60*60 +(myDate.getHours() ...
         getTimedata(){
       
         let dat = "2019-07-12 10:26:50"
        //  split("/")
    
        let  getYeardata = dat.split(" ")[0];
         let  getTimedata = dat.split(" ")[1];
        //  年月日  时分秒
      const beforeYear = getYeardata.split("-")[0];
      const beforeMonth = getYeardata.split("-")[1];
      const beforeDate = getYeardata.split("-")[2];
      const beforeHours = getTimedata.split(":")[0];
      const beforeMinutes = getTimedata.split(":")[1];
      const beforeSeconds = getTimedata.split(":")[2];
    
      //  var myDate = new Date();  
    //myDate.getYear(); //获取当前年份(2位)  
    //myDate.getFullYear(); //获取完整的年份(4位,1970-????)  
    //myDate.getMonth(); //获取当前月份(0-11,0代表1月)         // 所以获取当前月份是
    //myDate.getMonth()+1;   
    //myDate.getDate(); //获取当前日(1-31)  
    //myDate.getDay(); //获取当前星期X(0-6,0代表星期天)  
    //myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)  
    //myDate.getHours(); //获取当前小时数(0-23)  
    //myDate.getMinutes(); //获取当前分钟数(0-59)  
    //myDate.getSeconds(); //获取当前秒数(0-59)  
    //myDate.getMilliseconds(); //获取当前毫秒数(0-999)  
    //myDate.toLocaleDateString(); //获取当前日期  
    //var mytime=myDate.toLocaleTimeString(); //获取当前时间  
    //myDate.toLocaleString( ); //获取日期与时间  
      const myDate = new Date();  
      
        myDate.getFullYear(); //获取完整的年份(4位,1970-????)  
        myDate.getMonth(); //获取当前月份(0-11,0代表1月)      
    myDate.getDate(); //获取当前日(1-31)  
    
    myDate.getHours(); //获取当前小时数(0-23)  
    myDate.getMinutes(); //获取当前分钟数(0-59)  
    myDate.getSeconds(); //获取当前秒数(0-59)  
    
    // 计算差值  
    const  getDifference = (myDate.getFullYear() - beforeYear)*365*24*60*60
            +(myDate.getMonth() - beforeMonth +1)*30*24*60*60
            +(myDate.getDate() - beforeDate )*24*60*60
            +(myDate.getHours() -  beforeHours )*60*60
            +(myDate.getMinutes() - beforeMinutes  )*60
            +(myDate.getSeconds() - beforeSeconds )
            }

     

    展开全文
  • 关于vue中计算属性

    千次阅读 2018-09-19 19:41:37
    计算属性(computed)用于处理复杂逻辑 computed:{ } computed做为vue的选项是固定的 例子: {{mes}} {{count}} 输出结果为: hello vue vue—hello 练习 要求:点击button按钮使数字以对应的价格改变 Image ...
  • 关于Vue中计算属性computed

    千次阅读 2018-03-12 18:09:45
    我们都知道,在Vue中,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。 看看代码: {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} &lt;div...
  • Vue中根据时间戳计算时间间隔-年龄

    千次阅读 2019-12-02 20:06:29
    Vue中根据时间戳计算时间间隔-年龄 实现目标 功能代码 内容小结 实现目标     由于数据库没有直接存储用户的年龄,只有以时间戳为格式的出生日期,所以不得不在前端做一下计算处理。下面就和大家一起来看...
  • vue 时间插件

    千次阅读 2018-04-12 16:32:42
    vue-calendar
  • 通过计算属性来获取当前时间 <div class="mounth"> <div class="datatime" @click="showTimePopup(userCheckMonth ? userCheckMonth : current_date)" > <span class="time">{{ ...
  • 如果当前聊天时间不是当天时间,则显示 Y-M-D,或者为 H : MM 注意时间戳比较时,月份会差1,记得getMonth()后加1
  • Vue中 使用 moment.js 计算时间差值

    千次阅读 2020-04-02 23:02:56
    安装插件:moment.js npm install moment format就是格式化函数,参数’YYYY-MM-DD HH:mm...1. 计算两个日期差 var moment = require('moment'); let diffTime = moment('2020-04-02').diff(moment('2019-04-02')); ...
  • 主要介绍了vue中 根据时间戳 判断对应的时间(今天 昨天 前天),需要的朋友可以参考下
  • 在使用Vue时候,可能会发现一个问题:我们不想在data给某个property赋上固定的默认值,而是想赋值一些经过计算的property值,甚至使用到了其他property,第一时间可能会想到这么写,如下 错误示例: ...
  • 首先在script标签,定义一个方法 function getDaysBetween(dateString1, dateString2) { let startDate = Date.parse(dateString1); let endDate = Date.parse(dateString2); return (startDate - endDate ) / ...
  • vue时间

    千次阅读 2019-06-19 16:32:23
    Vue时间轴demo及思路 实现思路及步骤: 页面分为四个部分 1、左侧时间 2、中间圆点 3、右侧内容 4、虚线部分 最外层div,relative布局,方便子元素计算尺寸 左侧时间固定宽度,显示时间(本demo:100px),...
  • 计算属性中计算属性可以进行相互的依赖并且可以依赖不同的vue实例,其中的实例只要一项数据进行变化,计算属性就会进行重新的执行,视图也会就行更新 在计算属性有两个方法,一个getter,一个setter,一般会直接...
  • 教女朋友学习 vue中的过滤器及其时间格式化

    万次阅读 多人点赞 2020-04-07 22:56:07
    这篇博客讲解自定义vue中的过滤器,并有完整的代码实现。
  • vue+js 计算时间差值

    2020-07-23 14:48:03
    export const getTimeValue = (start, end)=>{ var stime =new Date(start).getTime(); var etime = new Date(end).getTime(); var usedTime = etime - stime;... //计算出小时数 var leave1
  • vue 中用js计算两个时间

    千次阅读 2020-04-26 16:57:34
    选取时间 计算两个时间差的函数 天,时,分,秒 计算两个时间的小时数 (也可以选择天, 分钟, 秒, 改变第三个参数)
  • VUE 计算属性和观察者

    千次阅读 2017-10-16 11:51:09
    计算属性和观察者计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板放入太多的逻辑会让模板过重且难以维护。例如:div id="example"> {{ message.split('').reverse().join('') }}div>...
  • vue也有一段时间了,今天和大家分享一下vue中计算属性和侦听器watch 1.什么是计算属性 计算属性就是当其依赖属性的值发生变化是,这个属性的值会自动更新,与之相关的DOM部份也会同步自动更新。来看图一的...
  • 根据时间字符串计算时间差根据时间字符串计算时间差 根据时间字符串计算时间差 /** * 根居时间字符串计算时间差, * @param startTime 2020-09-15 15:53:04 开始时间 * @param endTime 2020-09-15 15:53:04 结束...
  • 一开始想法,通过时间戳来做 在进入程序的时候获取当前的时间戳timeIn存到sessionStorage ...最后发现,我无法在关闭程序,或者离开程序的时候,把今天的时间存入缓存,因为app.vue文件无论是
  • vue 过滤时间日期

    2021-06-07 17:54:48
    过滤器本身就是一个函数 ,把内容转换成另一种格式 ...Vue.filter('过滤器名', (oldVal) => { // ... return 处理后的结果 }) 三、使用过滤器 {{ 原数据 | 过滤器名 }} // 相当于 {{ 过滤器名(原数据) }...
  • vue计算属性-computed 语法: computed: { "计算属性名" () { return "值" } } 例如:让页面显示两个数字和和 <template> <div> <p>和为: {{ num }}</p> </div> </template&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,685
精华内容 13,474
关键字:

vue中时间的计算

vue 订阅