<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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>
</head>
<body>
<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>
<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>
</body>
</html>