运行效果如下：

全部代码：

//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>