vue开发，js实现获取当前日期，页面渲染当前日期后5天的日期时间_前端获取当前时间后五天的时间戳

运行效果如下：

全部代码：

//css样式：
<style>
	h5,.div {
		width: 50%;
		line-height: 60px;
		text-align: center;
		margin: 0 auto;
		border: 1px solid #ddd;
	}
	
	.active {
		color: red;
		background-color: #ddd;
	}
</style>
 
 
//html代码：
<div id="app">
 
	<h5>你当前选中的日期是：{{seleDate}}</h5>
 
	<div class="div" v-for="(item,index) in list" @click="fn(index)" :class="{active:ide ==index}">{{item}}</div>
 
</div>
 
//js代码：
<script>
	new Vue({
 
		el: '#app',
 
		data: {
 
			seleDate: '',
 
			list: [],
 
			ide: 0 //默认选择第一个
 
		},
 
		created: function() { //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
 
			var dateObj = {};
 
			for(var i = 1; i <= 5; i++) {
 
				dateObj = this.getDate(i); //把返回的日期赋值给对象
 
				this.list.push(dateObj); //把对象添加到数组里面，然后渲染到页面
 
			}
 
		},
 
		methods: {
 
			fn(index) {
 
				this.ide = index;
 
				this.seleDate = document.getElementsByClassName('div')[index].innerHTML; //获取当前选中的时间
 
			},
 
			getDate(n) {
 
				var ss = 24 * 60 * 60 * 1000; //一天的毫秒数86400
 
				var timestamp = new Date().getTime(); //获取当前时间戳
 
				var date1 = new Date(ss * n + timestamp) //加上n天的国际标准日期
 
				var newTime = date1.toLocaleString(); //把日期转换成2018/6/4 下午10:45:19 格式
 
				var arr = newTime.split(" "); //把2018/6/4提取出来
 
				var arr2 = arr[0].split('/'); //把年月日数字单独提出来
 
				return arr2[0] + '年' + arr2[1] + '月' + arr2[2] + '日'; //拼接成我们需要的格式返回
 
			}
 
		}
 
	})
</script>