《Vue.js实战》8.2实战

最新推荐文章于 2024-10-04 00:46:18 发布

returnadsss

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量147

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/returnadsss/article/details/126431882

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>标签页组件</title>
	<style type="text/css">
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div v-birthday="birthday"></div>
	</div>
	<script src="vue.js"></script>
	<script>
		let Time={
			/*getUnix:function(){
				let date=new Date();
				return date.getTime();
			},*/
			getFormatTime:function(timestamp){
				let now=new Date();
				let birthday=new Date(timestamp);
				let birthYear=birthday.getFullYear();
				let birthMonth=birthday.getMonth();
				let birthDay=birthday.getDate();
				let nowYear=now.getFullYear();
				let nowMonth=now.getMonth();
				let nowDay=now.getDate();
				let myYear,myMonth,myDay;

				if(nowDay>=birthDay){
					myDay=nowDay-birthDay;
				}else{
					myDay=nowDay+this.getMonthDay(birthYear,birthMonth)-birthDay;
				}
				if(nowMonth>=birthMonth){
					myMonth=nowMonth-birthMonth;
					myYear=nowYear-birthYear;
				}else{
					myMonth=nowMonth+12-birthMonth;
					myYear=nowYear-birthYear-1;
				}
				let tip='现在年龄'+myYear+'岁'+myMonth+'月'+myDay+'天';
				return tip;
				/*let now=this.getUnix();
				let timer=(now-timestamp)/1000;
				let tip='已经出生了'+Math.floor(timer/86400)+'天';
				return tip;*/
			},
			getMonthDay:function(year,month){
				let big=[0,2,4,6,7,9,11];
				if(month in big){
					return 31;
				}
				else if(month===1){
					if(year/4===0){
						return 29;
					}else{
						return 28;
					}
				}
				else{
					return 30;
				}
			}
		}
		Vue.directive('birthday',{
			bind:function(el,binding){
				el.innerHTML=Time.getFormatTime(binding.value);
			}
		})
		const app=new Vue({
			el:'#app',
			data:{
				birthday:(new Date("4/11/1994")).getTime()
			},
			/*computed:{
				birthday:function(){
					let birthday=new Date("4/11/1994");
					birthday
				}
			}*/
		})
	</script>
</body>
</html>