精华内容
下载资源
问答
  • vue获取当前时间
    2022-01-11 11:05:52
    data() {
    		return {
    			currentTime:'',	
    },
    methods: {
        getCurrentTime() {
            //获取当前时间并打印
          let yy = new Date().getFullYear();
          let mm = new Date().getMonth()+1;
          let dd = new Date().getDate();
          let hh = new Date().getHours();
          let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
          let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
          let time = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
            return time;
    
        }
    }
    created(){
        this.currentTime = this.getCurrentTime()
    }

    更多相关内容
  • 主要介绍了Vue获取当前时间并实时刷新,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 获取当前时间

    2021-12-27 10:58:38
    <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} //{{formatDateTime}} </div> </template> <... nowTime: "", // 当前时间 nowWeek: "" // 当前星期 //.
    <template>
     <div>
      {{nowDate}}{{nowWeek}}{{nowTime}}
      //{{formatDateTime}}
     </div>
    </template>
     
    <script>
    export default {
     data(){
      return {
       nowDate: "",  // 当前日期
       nowTime: "",  // 当前时间
       nowWeek: ""   // 当前星期
       //formatDateTime:"", //当前总时间
      }
     },
     methods:{
      dealWithTime(data) { // 获取当前时间
       //年
       let year = data.getFullYear();
       //月
       let month = data.getMonth() + 1;
       //日
       let date = data.getDate();
       //时
       let hours = data.getHours();
       //分
       let minutes = data.getMinutes();
       //秒
       let seconds = data.getSeconds();
       //周几
       let W = data.getDay();
       hours = hours < 10 ? "0" + hours : hours;
       minutes = minutes < 10 ? "0" + minutes : minutes;
       seconds = seconds < 10 ? "0" + seconds : seconds;
       switch (W) {
        case 0:
         W = "日";
         break;
        case 1:
         W = "一";
         break;
        case 2:
         W = "二";
         break;
        case 3:
         W = "三";
         break;
        case 4:
         W = "四";
         break;
        case 5:
         W = "五";
         break;
        case 6:
         W = "六";
         break;
        default:
         break;
       }
       this.nowDate = year + "年" + month + "月" + date + "日 ";
       this.nowWeek = "周" + W ; 
       this.nowTime = hours + ":" + minutes + ":" + seconds;
       // formatDateTime = year + "年" + month + "月" + date + "日 " + " 周" +W + hours + ":" + minutes + ":" + seconds;
      },
     },
     mounted() { 
      // 页面加载完后显示当前时间
      this.dealWithTime(new Date())
      // 定时刷新时间
      this.timer = setInterval(()=> {
        this.dealWithTime(new Date()) // 修改数据date
      }, 500)
     }, 
     destroyed() {
      if (this.timer) { // 注意在vue实例销毁前,清除我们的定时器
       clearInterval(this.timer);
      }
     }
    }
    </script>
     
    <style lang="scss" scope>
     
    </style>

    展开全文
  • 主要介绍了Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue获取当前时间方法教程

    千次阅读 2020-12-19 04:43:43
    1.主要使用原生的原理在vue中实现(自己拼接字符串)这种写法,每秒都在更新这个字符串,但是实际上,每秒不是时分秒都在变化,所以实际上这种写法的性能不是很好,按需求,我们应该局部更新视图,所以我们可以按需,...

    1.主要使用原生的原理在vue中实现(自己拼接字符串)

    这种写法,每秒都在更新这个字符串,但是实际上,每秒不是时分秒都在变化,所以实际上这种写法的性能不是很好,按需求,我们应该局部更新视图,所以我们可以按需,把时分秒做成一个组件,然后就变成按需渲染了

    2.利用本地的时间表示方式(根据语言选择合适的显示方式)

    注:什么是宏任务和微任务???

    1.这里涉及的setInterval定时器,定时器任务是宏任务,因为是在不同的进程中进行的

    2.就会有个问题,如果JS被阻塞了,JS后续的代码是不会被执行的,但是计时器会继续走

    3.这样的话,每过1秒,定时器就会发出一个信号,要执行一下这个任务,这时候,因为JS的阻塞,其实信号接收也被阻塞了,或者说,即是收到了一堆任务,也无法立即执行

    4.当时机切换到有剩余资源可以执行时,此时因为堆积了很多未执行的任务,所以会一下子把堆积的任务都执行掉,这就会造成一个可怕的结果,一瞬间造成大量的重绘

    5.这里的重绘只有在原生和用setInterval的时候才会出现,为什么呢?

    (1)

    因为Vue的渲染设计的是微任务,大量堆积的任务执行时同步的,前面的定时器通知要执行这个动作是异步的,所以对于Vue来说,是不会造成大量的重绘的

    (2)但是this.times仍然会一下子被设置很多次,设置多次也就意味着经历了多次的Vue的劫持,Vue内部的逻辑也会一下子经历多次

    (3)这只是因为我在页面上显示的是实时时间,才不会造成问题

    6.如果换成倒计时显示,很多人会设置每秒减1,这就会变成,当阻塞时,倒计时不动,阻塞时,倒计时不动是正常的,因为资源被占满了,不重绘也正常,但是,如果当有资源的话,一下子就会执行多次,就会看到屏幕上疯狂的倒计时递减,但其实,只要当有足够资源时,更新一次就行了,所以一种方法是可以用setTimeout替换setInterval

    7.使用setTimeout+递归,替换setInterval,setTimeout仍然会有和setInterval一样的问题,但是会有个区别,因为setTimeout实现不断更新的逻辑是不停的循环调用自己,所以即使主线程阻塞,定时器只会通知一次,要执行回调,实际上,应该总是用setTimeout,尽量少用setInterval,原因是我们太容易遇到阻塞了

    常见的阻塞场景:浏览器TAB页的切换,浏览器会挂起这个标签页的执行栈,也就是不在执行JS了,这个就相当于阻塞了

    事件管理是不管标签页的,它有浏览器的时间管理统一管理,setInterval是让定时器每隔一段时间告诉主线程要执行任务了,然后调用自身说的是要用setTimeout实现setInterval的效果,肯定要写出递归的方法,调用自身

    8.最后看宏任务的问题,哪怕已经改成了setTimeout,仍然会存在问题,问题在于两点:

    (1)宏任务因为存在资源的切换,所以设置的1秒后,肯定是大于等于1秒

    (2)开始的执行的实际不确定,因为你并不能保证程序执行的开始时间正好是整秒开始

    9.因为上述两个问题,可能对于秒来说,感觉不出什么,但是对于分呢?因为在前端上来说,喵不是最小的单位,还可以获取到比秒更精确的数值,那么总应该使用更精确的方式去获取数据,前端能获取到的最小单位是高精度的微秒

    10.所以如果实现一个秒表计时,用setTimeout和setInterval根本做不了,只能做到秒,但是秒后面的小数点该怎么做呢,要间隔多久更新一次呢?

    11.我们无法知道要隔着多少秒去获取一下时间,因为时间时不断变化的,但是我们知道渲染的间隔,只要在每次渲染时去获取实时的精确的时间,所以,最好的方法,我们不应该使用宏任务,而应该使用微任务去做

    展开全文
  • 原生的vue源代码,使用vue获取当前IP,并且获取到当前所在地天气.docx,亲测有效,有问题可一直私聊我
  • vue </div> <div class="" @click="MAP"> 地图 </div>

    vue 获取当前时间(并与演出时间对比做出状态改变)

    功能需求:

    • 演出预告页面内
    • 如果节目正在当前时间段进行,那么时间字段为绿色。
    • 如果节目已结束,那么时间字段为灰色。
    • 如果节目未开始,那么时间字段为默认黑色。

    实现思路:

    • 获取到当前时间
    • 获取到数据内节目的开始与结束时间
    • 用replace()方法去除时间段内的符号(:)
    • 用slice()方法截取时间
    • 用vue中:class方法结合if else 改变时间段的颜色(状态)
    • 上代码(注释)

    <template>
    	<div>
    		<div class="">
    			演出时间预告:
    		</div>
    		<!-- 这里只判断time_data数据中下标为0的时间段,其他时间段未做判断 -->
    		<p :class="{cls:underway,clss:finished}">{{time_data[0].start}}-{{time_data[0].end}}</p>
    		<p>{{time_data[1].start}}-{{time_data[1].end}}</p>
    		<p>{{time_data[2].start}}-{{time_data[2].end}}</p>
    	</div>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				underway: '',
    				finished: '',
    				getTime: '',
    				time_data: [{
    						id: 1,
    						name: '孔雀开屏',
    						start: '12:00:00',
    						end: '14:00:00'
    					}, {
    						id: 2,
    						name: '猴子上树',
    						start: '08:00:00',
    						end: '10:00:00'
    					},
    					{
    						id: 3,
    						name: '蚂蚁搬家',
    						start: '20:00:00',
    						end: '22:00:00'
    					}
    				]
    			}
    		},
    		methods: {
    			getCurrentTime() {
    				//获取当前时间并打印
    				var _this = this;
    				// let yy = new Date().getFullYear();年获取
    				// let mm = new Date().getMonth() + 1;月获取
    				// let dd = new Date().getDate();日获取
    				let hh = new Date().getHours();
    				let mf = 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.getTime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;/
    				_this.getTime = hh + ':' + mf + ':' + ss;
    				console.log(_this.getTime); //打印获取到的时间
    				let get_time = _this.getTime.replace(':', ''); //去除 :符号
    				console.log(get_time);
    				let begin_ = this.time_data[0].start.replace(':', ''); //去除数组time_data中下标为0的开始时间中的:符号
    				console.log(begin_);
    				let end_ = this.time_data[0].end.replace(':', ''); //去除数组time_data中下标为0的结束时间中的:符号
    				console.log(end_);
    				let get_time1 = get_time.slice(0, 4); //截取前四位时间数
    				console.log(get_time1);
    				let begin_1 = begin_.slice(0, 4);
    				console.log(begin_1);
    				let end_1 = end_.slice(0, 4);
    				console.log(end_1);
    				// 如果当前时间大于等于开始时间且小于等于结束时间,(代表当前时间是表演时间,)那么这个类为真,就为它添加类名为cls的这个类,否则就不添加
    				if (get_time1 >= begin_1 && get_time1 <= end_1) {
    					this.underway = true;
    				} else {
    					this.underway = false;
    				};
    				// 如果当前时间大于等于开始时间且大于等于结束时间,(代表表演已结束,)那么这个类为真,就为它添加类名为cls的这个类,否则就不添加
    				if (get_time1 >= begin_1 && get_time1 >= end_1) {
    					this.finished = true;
    				} else {
    					this.finished = false;
    				}
    				console.log(this.underway);
    			},
    
    		},
    		mounted() {
    			this.getCurrentTime();
    		}
    	}
    </script>
    
    <style>
    	.cls {
    		color: green;
    	}
    
    	.clss {
    		color: gainsboro;
    	}
    </style>
    
    

    功能实现~~
    谢谢

    展开全文
  • Vue 获取当前时间并格式化

    千次阅读 2021-01-14 06:28:54
    Vue 获取当前时间并格式化现在的代码,一家原创,万家抄袭,嗯,我也是...直接就是大代码一顿狂粘!!啪啪啪!用去吧!/*** 获取当前时间* 格式YYYY-MM-DD*/Vue.prototype.getNowFormatDate = function() {var date ...
  • {{currentTime}}data() {return{timer: "",//定义一个定时器的变量currentTime: new Date(), // 获取当前时间}},created() {var vm = this;vm.timer = setInterval(() => {var y = new Date().getFullYear();var ...
  • vue获取当前时间(年月日时分秒)

    千次阅读 2021-12-23 17:51:34
    //获取当前时间并打印 var _this = this; let yy = new Date().getFullYear(); let mm = new Date().getMonth()+1; let dd = new Date().getDate(); let hh = new Date().getHours(); let mf = n
  • Vue获取当前时间

    2021-05-16 10:31:08
    转载自:https://www.jianshu.com/p/d39eddb6f8c4
  • 将公共的方法放到commom.js里面,然后再需要的页面直接引入即可 //转为年月日 export var formatDate = function(date) { if (date != '' && date != undefined && date != null) { ...
  • <template> <div> {{nowTime}} </div> </template> <script> export default { ... currentTime:'',//当前时间 } }, methods:{ NowTime(){ this.currentTime = t.
  • Vue获取当前时间以及周几

    千次阅读 2021-03-17 23:50:30
    Vue获取当前时间以及周几
  • 最基础的获得时间,懒得码了,就直接CV
  • 一、在方法中写入以下代码: methods: { getDay (day, hours) { var today = new Date() var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day + hours today.setTime(targetday) ...
  • //获取当前时间并打印 var _this = this; let yy = new Date().getFullYear(); let mm = new Date().getMonth() + 1; let dd = new Date().getDate(); var str = "周"; var week = new Date().getDay(); ...
  • vue获取当前日期

    千次阅读 2022-04-21 15:10:12
    获取当前时间的方法: let date= new Date() 在控制台打印出来的结果: Thu Apr 21 2022 15:13:05 GMT+0800 (中国标准时间) 我们通常获取当前年度、月份或日期 //年 let year = new Date().getFullYear(); //...
  • //当前年月日时分秒 let yy = ... //当前星期 let wk = new Date().getDay() let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] let week = weeks[wk] console.log(gettime, week)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,000
精华内容 15,600
关键字:

vue获取当前时间