例子如下:
HTML:
<view
style="margin-top: 3%;width: 100%;height: 10vh;display: flex;justify-content: space-around;">
<div v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']"
@click="select(item)" :key='index'>
<span style="font-weight: 600;margin-top: 5%;">{{item.week}}</span>
<br>
<view style="width:30px;height: 30px;border-radius: 50%;border: none;background-color: #EFEFEF;text-align: center;display: flex;justify-content: center;align-items: center;margin-top: 20%;font-size: 12px;">{{item.name}}</view>
</div>
js 生命周期执行
created() {
// 默认显示当天前一周的数据
let data = []
this.start = this.getDay(+7);
this.end = this.getDay();
for (let i = 6; i >= 0; i--) {
data.push(this.getDay(+i))
}
var date = data.reverse()
this.week = date;
var date = this.week;
var pkc = [];
var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
date.forEach((item, index) => { //循坏日期
var f = new Date(item);
var week = f.getDay() //计算出星期几
var str1 = item.split('/');
var strs = str1[2];
var weeks = weekday[week]
var time = Math.round(new Date(item) / 1000)
var s = {} //用于存储每个日期对象
s.date = item;
s.name = strs;
s.week = weeks;
s.times = time;
pkc.push(s)
})
this.same_week = pkc;
this.same_day = pkc[0].date;
},
methods:事件
getDay(day) {
var today = new Date();
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
today.setTime(targetday_milliseconds);
var tYear = today.getFullYear();
var tMonth = today.getMonth();
var tDate = today.getDate();
tMonth = this.doHandleMonth(tMonth + 1);
tDate = this.doHandleMonth(tDate);
return tYear + "/" + tMonth + "/" + tDate;
},
doHandleMonth(month) {
var m = month;
if (month.toString().length == 1) {
m = month;
}
return m;
},
//
},
return:
week: [],
same_week: [],
same_day: '',