執行效果如下：

全部程式碼：

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