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; //一天的毫秒数86400var 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>